We Keep Coding

JS - FullCalendar : Listen when the month changes

I'm having a little issue with FullCalendar v5, I configured it with the dayGridMonth View and I would like to listen when the user changes the current month ...
For example, if he is seeing February and click on next he'll see march, so I was expected for a handler like onChange or onMonthChange but I didn't find anything in the documentation to do something like this ...
I figured how to get around the problem by making my own prev / next buttons and triggering my custom handler on the click ... But I would like to know if there is a vanilla way to do it?
Thanks for your answers.

As mentionned by #Devsi Odedra, the answer was datesSet
The doc : https://fullcalendar.io/docs/datesSet
This is my actual code if it can help someone :
new Calendar(document.getElementById("calendar"), {
plugins: [ dayGridPlugin, interactionPlugin ],
datesSet: event => {
// As the calendar starts from prev month and end in next month I take the day between the range
var midDate = new Date((event.start.getTime() + event.end.getTime()) / 2).getMonth()
var month = `0${ midDate.getMonth() + 1 }`.splice(0, -1)
doSomethingOnThisMonth(month, midDate.getFullYear())
}
});
function doSomethingOnThisMonth(month, year) {
fetch(`myApi.com/something?month=${ month }&year=${ year }`)
.then((result) => {
// Do something
})
}

Query fullCalendar dayClick - convert (date) to HH.MM

I want the time will be selected when clicking on timeslot of a day in fullclendar. i.e, if i click on 9.00am - 9.30am slot, i want both time. this is my code:-
$('#calendar').fullCalendar({
allDayDefault: false,
dayClick: function(date, allDay, jsEvent, view){
popupopen = 1;
var clickedTime = 'Clicked on: ' + date.format();
});
Now, if i click 10.00 am,this gives:- Clicked on: 2016-07-19T10:00:00. But, i only want,10.00. How to get that? And also when i click on 10.00 -10.30 slot, how to get both time?

For your first question: date is a moment.js object, so just use moment.js methods.
var clickedTime = date.format("h:mm a");
As for getting the second date, I can only think of setting it manually using slotDuration and then since you will know this value, you can add it to the start date.
E.g. in my calendar the slotDuration is 1 hour, so I would do date.add(1, 'hours');

AngularJS - Events get removed on month change

Issue
I have managed to get my events to load up in the fullCalendar using AngularJS. The issue arises when I change the month view and all the events disappear.
Code
Here is the code I use to change the month view:
//BC - SETS THE MONTH ON THE CALENDAR.
$('#calendar').fullCalendar('gotoDate', MyDateString);
Here is the code I use to add events to my calendar (This is done in the page load function of the controller page):
var holidays = [];
$scope.eventSources = [{
events: [],
color: '#ffd47f', // an Event Source Option!
textColor: '#3c4756' // an Event Source Option!
}];
$http.get("http://localhost/AceTracker.svc/GetAllEventsByUser?user_id=1")
.success(function (data) {
for (var key in data.GetAllEventsByUserResult) {
if (data.GetAllEventsByUserResult.hasOwnProperty(key)) {
holidays.push(data.GetAllEventsByUserResult[key])
}
}
holidays.forEach(function (hol) { //forEach loop through the holidays array data
$scope.eventSources[0].events.push({ //Push a new object to our eventSOurces array
end: $filter('dateFilter')(hol.HOLIDAY_END),
start: $filter('dateFilter')(hol.HOLIDAY_START),
title: hol.HOLIDAY_TITLE //Set up fields on new object
});
});
});
Conclusion
How can I get the events to stay in the calendar?

FullCalendar plugin - display hour in all of cells?

I am using FullCalendar jQuery plugin and I need to modify it. My goal is to automatically display hour in every single cell, in every single day as event. I am creating an online registration system for my application and I need this functionality. After user clicks any hour and confirms it, I want to disable clicks for that chosen hour.
You can see on the picture on Monday example what I want to achive(but for all days):

No need to alter the plugin itself. Just make good use of all of the options available.
If you are just trying to change the content of any event that is displayed on the calendar, pass a function to the eventRender callback that returns a new DOM element. Use the momentjs library to display a formatted string for the start property of the event. For example:
var calendarOptions = {
// ...other options
eventRender: function(event, element) {
$(element).html(moment(event.start).format('h:mm'));
return element;
}
}
When you are done with calendarOptions, you'll obviously need to pass it to fullCalendar:
$(calElement).fullCalendar(calendarOptions);
If you want to display an event in every single cell, then first make an array of events for every cell increment... something like this:
var myEvents = [];
var timeCursor = moment(startTime);
while (+timeCursor < +moment(endTime)) {
var start = +timeCursor;
timeCursor = timeCursor.add(timeIncrement,'minutes');
var end = +timeCursor;
myEvents.push({
start: start,
end: end
});
}
(where you've previously set startTime, endTime, and timeIncrement!)
Then the events property of the calendar options to this array before passing to fullCalendar:
calendarOptions.events = myEvents;
Finally, to handle clicks on an event, pass a function to the eventClick callback option that does whatever you want. For example, if you are keeping track of which events have been clicked, you might want to push their start times to an array:
var clickedEvents = [];
calendarOptions.eventClick: function(calEvent, jsEvent) {
if (clickedEvents.indexOf(calEvent.start) < 0) {
clickedEvents.push(calEvent.start);
} else {
return false;
}
}
Then of course you might want to modify your eventRender callback again to have your event display reflect this status by changing the style of the element, adding a line like this before returning the altered element:
if (clickedEvents.indexOf(calEvent.start) < 0) {
$(element).addClass('already-clicked');
}
(Be sure to set the style for .already-clicked in your CSS with something like cursor: not-allowed and opacity: 0.5.)
fullCalendar rocks!

I am trying to use #georgedyer code, but I have some issues :/
Firstly i will show You how it looks like in my MVC 4 application:
Here is my View(html) for display fullCallendar. The point of this is only to display events for every single cell:
//path to installed moment.js
<script src="~/Scripts/moment.js"></script>
<script>
$(document).ready(function () {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultView: 'agendaWeek',
editable: true,
allDaySlot: false,
selectable: true,
slotMinutes: 15,
events: myEvents,
eventRender: function(event, element) {
$(element).html(moment(event.start).format('h:mm'));
return element;
},
eventClick: function (calEvent, jsEvent, view) {
alert('You clicked on event id: ' + calEvent.start
+ "\nSpecial ID: " + calEvent.someKey
+ "\nAnd the title is: " + calEvent.title);
},
(...)
});
//HERE IS YOUR CODE ABOUT CREATING ARRAY
var myEvents = [];
var timeCursor = moment('2015-09-08');
while (+timeCursor < +moment('2015-10-01'))
{
myEvents.push { start: timeCursor }
timeCursor = timeCursor.add('15', 'minutes');
}
</script>
<div class="container">
<div id='calendar' style="width:65%"></div>
</div>
I have question about one line of code because VisualStudio display warning here about semicolon: myEvents.push { start: timeCursor }.
I tried to change it to this: myEvents.push ({ start: timeCursor }), error disappear, but still doesn't work :/
I don't know what is wrong in this. After run this code It just display empty FullCalendar. I know this code is a little different than your but I think this should work the same way. Please for some help here.
Edit: I think that eventRender: function works just fine because if I creating an event by myself,It displays hour like it should. So problem is only in creating events. I think in my code my myEvents array is in wrong place and when I invoke it in events: myEvents array has zero items.

change date format using locale

I am working on a simple textbox that has Dojo datepicker. The code below parses the date correctly with locale en-gb (dd/mm/yyyy). However the date that is picked from the datepicker is still in locale en-us (mm/dd/yyyy). So, it cannot parse the date that if it exceeds the 12th of the month.
require(["dojo/date/locale","dijit/form/Button", "dojo/dom", "dojo/domReady!"],function(locale,Button,dom){
var myButton = new Button({
label: "Submit Date",
onClick: function(){
var date = locale.parse(dom.byId("date1").value,{
formatLength:'short',
selector:'date',
locale:'en-gb'
});
alert(date);
}
}, "submit");
});
How do I fix this?

I solved this problem by mentioning the date format explicitly.
onClick: function(){
var date = locale.parse(dom.byId("date1").value,{
formatLength:'short',
selector:'date',
locale:'en-gb',
datePattern:'dd/MM/yyyy'
});
alert(date.toLocaleString());
}
And, mentioned the pattern inline as well.
constraints="{datePattern:'dd/MM/yyyy', strict:true}"