We Keep Coding

How to grab selected dates from flatpickr

I have a range date picker at the moment.
<input id="rangeDatepicker2" class="g-font-size-12 g-font-size-default--md" type="text" data-rp-wrapper="#rangePickerWrapper2" data-rp-type="range" data-rp-date-format="d M Y" data-rp-default-date='["01 Jan 2016", "31 Dec 2017"]'>
I would like to reuse the dates but I am unable to select them for all scenarios. I tried the code below which works great if the date selected are in the same month. But my issue is this bit of code doesn't work if the dates span multiple months.
$("#rangeDatepicker2").change(function () {
var dates = $('.selected');
if (dates.length == 2) {
var start = dates[0].dateObj;
var end = dates[1].dateObj;
//interact with selected dates here
}
});
May I ask how do I properly grab selected date range of a flatpickr.

Many input plugins actually pass the values in a onChange handler. The values are available there.
Solution
Pass down an onChange handler when initializing flatpickr:
$("#rangeDatepicker2").flatpickr({
mode: 'range',
onChange: function(dates) {
if (dates.length == 2) {
var start = dates[0];
var end = dates[1];
// interact with selected dates here
}
}
})
Demo
onChange documentation:
https://flatpickr.js.org/events/#hooks

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.

Fullcalendar - go to Date from monthView after picking the date

Im using Fullcalendar v2.1.1. I want to make action:
Jump to agenda day from month view after picking the date.
When Iam on agendaDate view and i click on event I get modal.
Here are my tries:
dayClick: function(date, jsEvent, view) {
self.showEditDateModal(jsEvent.start);
}
this.showEditDateModal = function(startdate) {
self.calendarAvailable.fullCalendar('changeView', 'agendaDay');
self.calendarAvailable.fullCalendar('gotoDate', startdate);
}
And here is modal that I want to appear when you click from agendaDay view:
$('#reservationDateModal').modal('show');
I found this:StackLink
but when I use it that way:
self.calendarAvailable.fullCalendar('gotoDate', 2010, 5);
I get date: 1 January 1970
I also try (from documentation) to pass there date object but nothing help FullCallendar docs

I made it finally:
To use 'gotoDate' you need to pass there string like this:
self.calendarAvailable.fullCalendar('gotoDate', '2015-04-24');
and to make it automatically:
this.changeViewtoAgendaDay = function(startdate) {
var goto = startdate.format('YYYY-MM-DD');
self.calendarAvailable.fullCalendar('changeView', 'agendaDay');
self.calendarAvailable.fullCalendar('gotoDate', goto);
}
Answer for second point is simple if made for view:
if(view.name=='agendaDay'){ self.showEditDateModal(); }else{
self.changeViewtoAgendaDay(calEvent.start); }
Where:
this.showEditDateModal = function() {
$('#reservationDateModal').modal('show');
}

Fullcalender - Greater Date should not be Dragable behind the Smaller Dates

I have Dates like:
Start Date : 2013-12-04
End Date : 2013-12-06
Now I want to put a restriction that Smaller Date should not be Dragged after Bigger Date and Bigger Date should not be dragged before smaller Date.
Is this possible to implement ?
Here is my code so far:
$(document).ready(function() {
$('#calendar').fullCalendar({
editable: true,
events: "json-data.php",
eventDrop: function(event, delta) {
alert(event.title + ' was moved ' + delta + ' days\n' +
'(Dragged)');
},
loading: function(bool) {
if (bool) $('#loading').show();
else $('#loading').hide();
}
});
});

As shown in the documentation on eventDrop : the eventDrop callback receives among its arguments a revertFunc function, which, when called, reverts the event back to its original position.
Here is an outline of how you can write your eventDrop callback :
eventDrop : function(event,dayDelta,minuteDelta,allDay,revertFunc) {
var smaller = /* get date of (moved) smaller event */,
bigger = /* get date of (moved) bigger event */;
if ( smaller > bigger ) {
alert('smaller should stay before bigger');
revertFunc();
}
}

You can use 'revertFunc' (documentation here)
Put something like this in eventDrop
if (initialDate.getTime()>finalDate.getTime()) {revertFunc();}
getTime is to get the number of milliseconds passed since 1970(this is used for comparing two dates)
And by initialDate and finalDate I'm referring to the initial(drag start) and final(drag end) Date instances. In this case you can probably replace that init/final check by
if (dayDelta<0)
dayDelta is predefined in fullcalendar

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}"