Add holidays row in fullcalendar like google calendar - javascript

I use fullcalendar lib in my project. Now I want to add a holiday row like google calendar like this below image. Can I do that? and how?

First, create a function which return an object with all the holidays days for a year for example
function Holidays(y) {
var chrstimasDay = new Date(an, "11", "25")
//Add others holdays days here
return new Object([{
title: "Christmas Day's",
start: moment(chrstimasDay).format("L")
}
//Add others holdays days here
}
Then add this source in your fullcalendar
$("#yourDivId").fullCalendar({
//init your options....
eventSources: [
{
events: Holidays(moment().format('YYYY')),
color: "#000",
className: "Add extra classname here for customization"
}
})

Related

Disable specific times on a specific date using jQuery DateTimePicker

I am trying to disable specific times for specific dates using the jQuery DateTimePicker like this:
jQuery('#datetimepicker').datetimepicker({
disabledDates: ['27/04/2022 14:00'],
format:'d/m/Y H:i'
});
However, this does not work. I can either only disable specific times for every day, or disable specific dates.
That's because the jQuery plugin DateTimePicker's "disabledDates" only accepts and disables days.
https://xdsoft.net/jqplugins/datetimepicker/
It looks like there is no such option for disabling specific times, you could work with only enabling specific times with
https://xdsoft.net/jqplugins/datetimepicker/#allowTimes
jQuery('#datetimepicker').datetimepicker({
datepicker:false,
allowTimes:[
'01:00', '02:00', '03:00',
'04:00', ... , '15:00', '60:00'
]
});
If you would like to continue with jQuery DateTimePicker you would have to write your own function for it
e.g.
jQuery('#datetimepicker').datetimepicker({
format:'d.m.Y H:i',
timepicker: true,
lang: 'en',
onGenerate:function(ct,$i){
//some function here to disable certain times
});
}
}
});
or you could use Bootstrap Datepicker which has an option to do exactly what you want
https://getdatepicker.com/4/Options/#endisabledhours
try this Reference
$(function () {
var disabledDate = ['2020-07-14', '2020-07-15','2020-07-16'];
$('#datetimepickerDemo').datetimepicker({
disabledDates: disabledDate
});
});
Ok I actually managed to figure this out myself. I'm using PHP, but you can essentially just use any multidimensional array and JSON encode it.
$times[]=[
'2022-04-28'=>[
'hour' => 10,
'minute' => 30
]
];
$times[]=[
'2022-04-28'=>[
'hour' => 11,
'minute' => 15
]
];
$times[]=[
'2022-04-29'=>[
'hour' => 13,
'minute' => 30
]
];
$dates=json_encode($times);
Once you have your list of dates and times you can use the onGenerate() function to loop through your dates and add a disabled class to the specific times.
jQuery('#datetimepicker').datetimepicker({
lang:'en',
format:'Y-m-d H:i',
formatDate:'Y-m-d',
step:15,
onGenerate: function(ct, $i){
var date=moment(ct).format('Y-MM-D');
var datesArray=<?echo $dates;?>;
$.each(datesArray, function(i, dates){
if(date in dates){
var times=dates[date];
$.each(times, function(index, time){
var hour=times['hour'];
var minute=times['minute'];
var $object=$('[data-hour="' + hour + '"][data-minute="' + minute + '"]');
$object.addClass('xdsoft_disabled');
});
}
});
}
});
Please note: you will need to use the exact same date format for your array and jQuery function. Also, my step is set to 15 minute increments. So this only disables that exact step.

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

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.

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');
}

Categories