How do I obtain the first and last day of the current month being viewed in Fullcalendar, without including the days from the previous or next month?

I am curious about how to determine the first and last day of the main month displayed in fullcalendar.

Here is an example of the relevant month view:

https://i.sstatic.net/1eNUH.png

     events: function (start, end, timezone, callback) { //custom events function that runs every time the view changes
          alert (start.format());
          alert (end.format());
     },

When I test this code on a specific month (April 2017), I get: start.format()=2017-03-26 end.format()= 2017-05-07 However, I would prefer to retrieve the following dates: start: 2017-04-01 end: 2017-04-30

Is there a way for me to obtain these dates within the event function?

Thank you!

p.s. I would rather not utilize the "showNonCurrentDates: false" option

javascriptjquerycssajaxfullcalendar

Answer №1

Unfortunately, there isn't a direct method to retrieve this value through the "events" callback. However, you can implement a clever workaround:

The viewRender callback grants access to the "view" object of the current view, which contains the intervalStart and intervalEnd properties (refer to https://fullcalendar.io/docs/v3/view-object). These properties correspond to the interval that the view aims to represent. For instance, in a monthly view, they signify the start and end of the month. By storing these values into variables with broader scope than your calendar, you can utilize them in the events and/or eventsAfterAllRender callbacks as required.

var intervalStart, intervalEnd; //global variables

$('#calendar').fullCalendar({
   //...your options here...
    viewRender: function (view, element)
    {
        intervalStart = view.intervalStart;
        intervalEnd = view.intervalEnd;
    },
    events: function(start, end, timezone, callback) {
        console.log(intervalStart.format("YYYY-MM-DD"));
        console.log(intervalEnd.format("YYYY-MM-DD"));
        //...and so on
    }
});

Remember, the intervalEnd is exclusive, meaning for April, it will show as 1st May.

That being said, it might be simpler to just opt for the built-in showNonCurrentDates:false option, as suggested in your previous inquiry.

Answer №3

To ensure only current month dates are displayed, include the setting showNonCurrentDates: false,. This will hide dates outside of the current month. The event callbacks will show the first day of the current month as start and the first day of the next month as end

 $('#calendarLoansByRequestDate').fullCalendar({
            // Other settings
            showNonCurrentDates: false,
            events: function (start, end, timezone, callback) { //custom events function to be called every time the view changes
                alert(start.format());
                alert(end.format());
            }
 });

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ways to apply jquery.validate rules that have already been defined to form fields that are added dynamically

I need to duplicate a specific section of a form and apply the same validation rules that were set up before. After researching this issue, I found that most recommendations suggest adding new rules to the newly generated elements. Therefore, I attempted ...

javascriptjqueryjquery-validate

Issue with table sorting functionality when using Ajax calls in combination with PHP

I'm currently working on utilizing AJAX to fetch database entries from SQL and display them in HTML. My goal is to incorporate tablesorter JS to organize the database entries effectively. The main issue I have encountered is that each table row in m ...

phpajaxhtml-tabletablesorter

Obtain the initial data value and store it in an array for each distinct date

Below is a data object that needs to be iterated through using JavaScript in order to extract one "value" field into an array for each unique date. While I am able to retrieve all the data, my goal is to collect one value for each distinct date (ignoring ...

javascriptarrays

Most efficient method for updating ASP.NET page with Javascript

I am currently working on a project in ASP.net where I have to handle a large number of questions stored in XML format. My first challenge was to render these questions dynamically on a web page using RadioButtonLists and a placeholder called sectionHolder ...

c#javascriptasp.netrefresh

Explore the limitless possibilities of using jQuery Superscrollorama with fixed backgrounds

I am looking to achieve a scrolling effect with multiple elements, specifically three pictures in this case. While it is easy to implement scrolling, my goal is to keep the background fixed during the scroll event and have it move once the scrolling is co ...

jqueryhtmlcsssuperscrollorama

Tips for retrieving the current scroll height using react-infinite-scroller

I am currently developing a chat application and have implemented a scroll feature that loads older messages when scrolled from bottom to top. In order to optimize the user experience, I would like to detect if the user is at the bottom of the container be ...

javascriptreactjschatinfinite-scroll

Having trouble with the mouse trail code on codepen.io

I am currently attempting to integrate this specific CodePen sample into a Hugo template called Somrat Theme. I'm facing challenges in deciding where to place the HTML file; only the 'no cursor' section should go into style.css, and I need ...

javascripthtmlcss

Blocking certain charter inputs in ASP.NET can be achieved by implementing custom validation logic or

Here is an ASP.NET code snippet that prompts the user for input. The accompanying JavaScript ensures that the user does not leave the input field empty. Now, the goal is to prevent users from entering certain characters like (|,@,#,$) using the same JavaSc ...

javascriptasp.netvalidation

Exploring the Intersection of jQuery and Rails in Dynamic Form Development

I am currently working on an interactive form for a Rails project and need some assistance with listing multiple jQuery functions in the same file. Whenever I try to add a second set of code language, it seems to break the entire file. Below is the Rails ...

javascriptjqueryruby-on-railsforms

How to handle a situation where a React child component is blocking the

My child is currently preventing the parent method from being called when onMouseOver occurs. In order to gain a better understanding of the issue, I am including a code snippet and explaining what my desired outcome is. renderDropdown(){ let dropSt ...

javascripthtmlreactjs

Updating Elements in an Array Using JavaScript is Not Functioning as Expected

In my Angular application, I have included some lines of TypeScript code which involve Boolean variables in the constructor and an array of objects. Each object in this array contains input variables. selftest: boolean; failed: boolean; locoStateItem ...

javascriptarraystypescriptobject

Disabling a checkbox within an onClick event handler

I'm facing an issue where I have a checkbox with the type "checkbox" and I'm using JAWS to read it. The problem is that in IE11, JAWS reads a disabled checked checkbox as unchecked, which I believe is a bug in IE. To work around this, I need to r ...

javascripthtmlcheckbox

Help with parsing text in Javascript

Seeking advice on extracting specific text from a lengthy string. The string can be found at this link: I have a script that can make an HTTP request to retrieve all the text but I need guidance on extracting only certain components from this extensive st ...

javascriptjquery

Is there a way to include a backslash "/" between each element in a bootstrap navigation bar?

I am having trouble inserting a "/" between each item in my Bootstrap 3 navbar. It seems like the issue lies within my CSS code. I attempted to use this block of CSS, but it places the "/" above the navbar item: .navbar-custom .navbar-links-custom li:be ...

htmltwitter-bootstrapcsstwitter-bootstrap-3

try out testing with the mock declaration in Jasmine test

My service involves loading a variable from a JavaScript file fetched from a CDN (without a typedef). To handle this, I have created a declaration for the variable: declare const externalValue: string; @Injectable() export class Service { ... Everythi ...

javascriptangulartypescriptjasmine

Is it better to have a MySQL/PHP loop with multiple forms or just a single

I've been pondering a certain question that has been on my mind for quite some time, and I haven't been able to find a clear answer. Imagine I have a MySQL table with tasks, and in PHP I iterate through all the records to display them. Each row s ...

phpmysqlajaxformsloops

The older version of Google Chrome does not support the styles of Primeng as effectively

When using a more recent version of Primeng with an outdated version of Google Chrome, the styles do not apply correctly. Updating Google Chrome or downgrading Primeng can fix this issue. Attached is a screenshot showing how the official Primeng example be ...

cssgoogle-chromeprimeng

Grunt.js global installation failure plagues users

After successfully installing gruntjs locally with npm install grunt, I encountered an error when attempting to install it globally using npm install grunt -g: npm ERR! Error: EACCES, symlink '../lib/node_modules/grunt/bin/grunt' ...

javascriptnode.jsnpmgruntjs

Implementing Angular to activate the JavaScript 'click' event

I am attempting to initiate an 'onclick' event within an angular controller. <div id="galerie"> <h2>{{main.Page.title()}}</h2> <hr> <div class="row"> <div class="col-sm-4 col-xs-6" ng-repeat= ...

javascriptangularjsangularjs-ng-click

Tips for updating the value of an element in AngularJS using a function

HTML: <div data-ng-app="story" data-ng-init="detail='share your story here'"> <div data-ng-controller="detail_controller"> <input type="text" name="detail" data-ng-model="detail"> <h1>{{detail}}</h1> ...

javascriptangularjs