I'm building a grade school, I have a bunch of disciplines and it's day of the week. I need to insert these disciplines into the calendar. The problem is:
There is no way to add only by the day of the week. See:
Today is Sunday( 04/09/2016 ). But the calendar days are from the PAST week.
So, if you have:
var day = 'monday';
When you are going to insert an event in runtime you'd do like so:
$('#calendario').fullCalendar(
'renderEvent',
{
id: id
title: $(this).find('a').text(),
start: year+ '-' +month+ '-' +day+ 'T' + startTime,
end: year+ '-' +month+ '-' +day+ 'T' + endTime,
backgroundColor: color,
className: someClass
}
)
As you can see, I HAVE TO specify dayof the month.
The problem is: Even using weekView, I can't work with events using only week days... I have to give the entire date(YYYY-MM-DD).
Today is sunday(04/09/2016). The calendar is half last month, half current month. How am I supposed to insert an event only by the day of the week ?
Also tried working with momentjs.
moment().day(1).hours(10).minutes(0).format('YYYY-MM-DD')
moment will return the second day of the week (0 - sunday, 1 - monday ), wich is 05 (currently week) and not the same as fullCalendar 29(last week). So I have no Idea how to insert my disciplines/events into the calendar.
You can provide events as a function and loop through the time period currently displayed, creating events on specific days
https://jsfiddle.net/0roafa2f/
$('#calendar').fullCalendar({
events: dowEvents
});
function dowEvents(start, end, tz, callback) {
var events = [];
var curr = start;
while(curr <= end) {
if(curr.format('dddd') === 'Monday') {
events.push({
title: 'Monday event',
start: moment(curr)
});
}
curr = curr.add(1, 'day');
}
callback(events);
}
According to the source code of the demo on this page:
https://fullcalendar.io/
meanwhile, events is an array object that can be listed manually, fetched from a url with json response or fetched from a function as stated here: https://fullcalendar.io/docs/event-data
$(function() {
var todayDate = moment().startOf('day');
var YM = todayDate.format('YYYY-MM');
var YESTERDAY = todayDate.clone().subtract(1, 'day').format('YYYY-MM-DD');
var TODAY = todayDate.format('YYYY-MM-DD');
var TOMORROW = todayDate.clone().add(1, 'day').format('YYYY-MM-DD');
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay,listWeek'
},
editable: true,
eventLimit: true, // allow "more" link when too many events
navLinks: true,
events: [
{
title: 'All Day Event',
start: YM + '-01'
},
{
title: 'Long Event',
start: YM + '-07',
end: YM + '-10'
},
{
id: 999,
title: 'Repeating Event',
start: YM + '-09T16:00:00'
},
{
id: 999,
title: 'Repeating Event',
start: YM + '-16T16:00:00'
},
{
title: 'Conference',
start: YESTERDAY,
end: TOMORROW
},
{
title: 'Meeting',
start: TODAY + 'T10:30:00',
end: TODAY + 'T12:30:00'
},
{
title: 'Lunch',
start: TODAY + 'T12:00:00'
},
{
title: 'Meeting',
start: TODAY + 'T14:30:00'
},
{
title: 'Happy Hour',
start: TODAY + 'T17:30:00'
},
{
title: 'Dinner',
start: TODAY + 'T20:00:00'
},
{
title: 'Birthday Party',
start: TOMORROW + 'T07:00:00'
},
{
title: 'Click for Google',
url: 'http://google.com/',
start: YM + '-28'
}
]
});
});
As far i understand if you want the event to be based on days like(sun,mon,tues) etc you can use dow it accepts array [0,1,2,3,4,5,6] sun,mon,tues respectively. Use start:"00:00:00" if you want it to repeat every day. e.g
Try this
events.push({
start: '00:00:00',
title: 'recursive event',
dow: [0,1,2] // each sun,mon,tues
})
Related
I am using FullCalendar 5 and JSON to populate the events:
id;
title;
daysOfWeek;
startRecur;
endRecur;
startTime;
endTime;
backgroundColor;
I have a series of Events with a start and end date. When I click on an Event the end date is showing as the date cell the Event occurrence is in. I want to retrieve the end date of the series of Events. I am using info.event.end.
This is the code:
eventClick: function(info) {
var eventObj = info.event;
$('#updateDescription').val(eventObj.title);
$('#updateStartDate').val(moment(eventObj.start).format('DD/MM/YYYY'));
$('#updateEndDate').val(moment(eventObj.end).format('DD/MM/YYYY')); //Shows as 29/11/2021 should be 01/12/2021
$('#updateStartTime').val(moment(eventObj.start).format('HH:mm'));
$('#updateEndTime').val(moment(eventObj.end).format('HH:mm'));
$('#updateColour').val(eventObj.backgroundColor);
$('#ecClickModal').modal('show');
},
id: '001,
title: 'Event A',
daysOfWeek: '[1, 4]',
startRecur: '2021-01-01',
endRecur: '2022-12-30',
startTime: '10:00',
endTime: '11:00',
backgroundColor: 'Red',
id: '002,
title: 'Event B',
daysOfWeek: '[2, 3]',
startRecur: '2021-05-01',
endRecur: '2023-05-30',
startTime: '09:00',
endTime: '10:00',
backgroundColor: 'Blue',
id: '003,
title: 'Event C',
daysOfWeek: '[5]',
startRecur: '2020-01-01',
endRecur: null,
startTime: '10:00',
endTime: '11:00',
backgroundColor: 'Green',
When I click on 'Event B' I want to get the end date '2023-05-30'.
Currently, if I click on the occurrence of 'Event B' on '30/11/2021' then:
info.event.start is 30/11/2021
info.event.end is 30/11/2021
Recurring Events do not need an end date. So the solution must be able to cater for 'Event C' (i.e., a null end date please).
Currently there are no in built functions in FullCalendar to fetch the last date from a series of events. You will have to fetch all events using calendar::getEvents and then find the end date of the last event.
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'dayGridMonth',
events: [
{
id: 'a',
title: 'my event a',
start: '2021-11-01',
end: '2021-11-02'
},
{
id: 'b',
title: 'my event b',
start: '2021-11-03',
end: '2021-11-04'
},
{
id: 'c',
title: 'my event c ',
start: '2021-11-05',
end: '2021-11-06'
},
{
id: 'd',
title: 'my event d',
start: '2021-11-07',
end: '2021-11-08'
},
],
});
calendar.render();
// Fetching all events
const allEvents = calendar.getEvents();
// Sorting the events based on the last date (descending)
allEvents.sort((eventA, eventB)=> {
return eventB.end-eventA.end;
});
const lastDate = allEvents[0].end;
});
info.event.end only gives you the end date of a single event.
Also, before I stumble into it, how do I manage a null end date please?
Could you please explain the issue?
Using fullcalendar library, I would like to display the start time for each empty cell on my calendar (empty cells are the one marked with a red cross or red dots in the below screenshot, I modified a bit the aspect of the calendar):
So my expected output is a calendar were timeslots become buttons, when you click you start the process of booking a 30 minutes appointment which would start at the written time (the green slot is an hover effect in the following screenshot):
I can't find any easy way to do it through after reading fullcalendar documentation : https://fullcalendar.io/docs
Subsidiary question, I can't find the way to change the style of the empty cell in the CSS. Can't manage to select the elements through my Chrome console.
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
columnHeaderHtml: function(date) {
if (date.getUTCDay() === 0) {
var date_day = "Lundi";
}
if (date.getUTCDay() === 1) {
var date_day = "Mardi";
}
if (date.getUTCDay() === 2) {
var date_day = "Mercredi";
}
if (date.getUTCDay() === 3) {
var date_day = "Jeudi";
}
if (date.getUTCDay() === 4) {
var date_day = "Vendredi";
}
if (date.getUTCDay() === 5) {
var date_day = "Samedi";
}
if (date.getUTCDay() === 6) {
var date_day = "Dimanche";
}
if(date.getMonth() === 0)
{
var date_month = "Jan";
}
if(date.getMonth() === 1)
{
var date_month = "Fev";
}
if(date.getMonth() === 2)
{
var date_month = "Mar";
}
if(date.getMonth() === 3)
{
var date_month = "Avr";
}
if(date.getMonth() === 4)
{
var date_month = "Mai";
}
if(date.getMonth() === 5)
{
var date_month = "Juin";
}
if(date.getMonth() === 6)
{
var date_month = "Juil";
}
if(date.getMonth() === 7)
{
var date_month = "Août";
}
if(date.getMonth() === 8)
{
var date_month = "Sept";
}
if(date.getMonth() === 9)
{
var date_month = "Oct";
}
if(date.getMonth() === 10)
{
var date_month = "Nov";
}
if(date.getMonth() === 11)
{
var date_month = "Dec";
}
var day_num = date.getDate();
return '<b>'+date_day+'</b><br><small>'+day_num+" "+date_month+"</small>";
},
plugins: [ 'interaction', 'dayGrid', 'list', 'googleCalendar','timeGrid' ],
selectable: true,
defaultView: 'timeGridFourDay',
views: {
timeGridFourDay: {
type: 'timeGrid',
duration: { days: 4 },
buttonText: '4 day'
}
},
slotLabelFormat:{
hour: 'numeric',
minute: '2-digit',
omitZeroMinute: true,
meridiem: 'short'
},
locale:'fr',
header: {
left: 'prev today',
right: 'next'
},
validRange: {
start: '2019-08-05',
end: '2019-09-05'
},
allDaySlot:false,
firstDay:1,
minTime:"08:00:00",
maxTime:"20:00:00",
displayEventTime: true, // don't show the time column in list view
// THIS KEY WON'T WORK IN PRODUCTION!!!
// To make your own Google API key, follow the directions here:
// http://fullcalendar.io/docs/google_calendar/
googleCalendarApiKey: 'AIzaSyAL9K2UqkCVfV0n81mDW0iEpOJSwcklfsY',
// US Holidays
events: 'fr.fr#holiday#group.v.calendar.google.com',
eventClick: function(arg) {
arg.jsEvent.preventDefault() // don't navigate in main tab
console.log(arg);
},
select: function(info) {
console.log(info)
},
loading: function(bool) {
},
eventSources: [
{
googleCalendarId: 'contact#vetorino.com',
className: "gcalEvent"
}],
displayEventEnd:false,
events:[
{ // this object will be "parsed" into an Event Object
start: '2019-08-05 12:30:00', // a property!
end: '2019-08-05 14:00:00', // a property! ** see important note below about 'e6d' **
overlap: true,
backgroundColor:"#F7F7F7",
textColor:"#979797",
classNames:"closed",
}],
contentHeight: "auto",
});
calendar.render();
});
So far as shown in my previous screenshot I just managed to have empty cells, the only cells where you find some information are cells containing events.
As discussed in the comments above, there is no single element in the fullCalendar HTML which represents a specific "cell" or "slot" in the timeGrid view. The grid you can see on screen is actually an illusion created by layering multiple tables on top of each other.
So to meet your requirement for a user to be able to select a 20-minute appointment in a free slot, I can see two main options. The first is what I would normally recommend, using the standard fullCalendar functionality. The second is more like what you are asking for, but I think it over-complicates things.
1) This option simply sets the calendar with a slot duration of 20 minutes, and then has code to stop the user from selecting a longer period of time (they cannot select a shorter period, due to the slotDuration setting. This means that they can click on any empty space once and it will know to create an event of the correct length in that location. The user is not allowed to select any slot where an event already exists. (P.S. I expect in reality you will need to collect more data before adding events, but for the demonstration it adds an event instantly.)
document.addEventListener("DOMContentLoaded", function() {
var Calendar = FullCalendar.Calendar;
var calendarEl = document.getElementById("calendar");
var calendar = new Calendar(calendarEl, {
plugins: ["timeGrid", "interaction"],
header: {
left: "prev,next today",
center: "title",
right: "timeGridFourDay"
},
defaultView: "timeGridFourDay",
views: {
timeGridFourDay: {
type: "timeGrid",
duration: { days: 4 },
buttonText: "4 day"
}
},
slotLabelFormat: {
hour: "numeric",
minute: "2-digit",
omitZeroMinute: true,
meridiem: "short"
},
allDaySlot: false,
firstDay: 1,
minTime: "08:00:00",
maxTime: "20:00:00",
contentHeight: "auto",
slotDuration: "00:20:00",
selectable: true,
select: function(info) {
//console.log(info);
calendar.addEvent({ "title": "Test", start: info.start, end: info.end })
calendar.unselect();
},
selectOverlap: false,
selectAllow: function(selectInfo) {
var stM = moment(selectInfo.start);
var enM = moment(selectInfo.end);
var diff = enM.diff(stM, "minutes");
console.log(diff);
if (diff > 20)
{
return false;
}
return true;
},
events: [
{ "title": "Existing event", "start": "2019-08-08 10:00", "end": "2019-08-08 10:20"},
{ "title": "Existing event", "start": "2019-08-08 13:20", "end": "2019-08-08 13:40"},
]
});
calendar.render();
});
Demo: https://codepen.io/ADyson82/pen/aeqJQg
2) This option is closer to your desired UI (from your 2nd screenshot) but is a bit more complicated to achieve. I also, personally, think it leaves your calendar looking cluttered, and making it harder to see where the free and busy slots are, but ultimately it's up to you how you want to implement it. This works by adding a second event source, containing a list of all currently free slots. These are then used to display the start time of each free slot in the centre of it. They are coloured differently from the existing events (indicating a busy slot), so that it's a bit easier to tell the difference.
Of course, this requires you to use your server-side code to calculate all the currently free slots in your database and use that information to populate the second event source. (In the demo the free slot data is static, but of course that will not work in a real application.)
document.addEventListener("DOMContentLoaded", function() {
var Calendar = FullCalendar.Calendar;
var calendarEl = document.getElementById("calendar");
var calendar = new Calendar(calendarEl, {
plugins: ["timeGrid", "interaction"],
header: {
left: "prev,next today",
center: "title",
right: "timeGridFourDay"
},
defaultView: "timeGridFourDay",
views: {
timeGridFourDay: {
type: "timeGrid",
duration: { days: 4 },
buttonText: "4 day"
}
},
slotLabelFormat: {
hour: "numeric",
minute: "2-digit",
omitZeroMinute: true,
meridiem: "short"
},
allDaySlot: false,
firstDay: 1,
minTime: "08:00:00",
maxTime: "20:00:00",
contentHeight: "auto",
slotDuration: "00:20:00",
displayEventTime: false,
eventClick: function(info) {
if (info.event.extendedProps.type == "free") {
calendar.addEvent({
title: "Test",
start: info.event.start,
end: info.event.end
});
info.event.remove(); //delete the "free slot" event
}
},
eventSources: [
{
id: "busy",
events: [
{
title: "Existing event",
start: "2019-08-08 10:00",
end: "2019-08-08 10:20"
},
{
title: "Existing event",
start: "2019-08-08 13:20",
end: "2019-08-08 13:40"
}
]
},
{
id: "free",
backgroundColor: "green",
events: [
{
title: "08:00",
start: "2019-08-08 08:00",
end: "2019-08-08 08:20",
type: "free"
},
{
title: "08:20",
start: "2019-08-08 08:20",
end: "2019-08-08 08:40",
type: "free"
},
{
title: "08:40",
start: "2019-08-08 08:40",
end: "2019-08-08 09:00",
type: "free"
},
{
title: "09:00",
start: "2019-08-08 09:00",
end: "2019-08-08 09:20",
type: "free"
},
{
title: "09:20",
start: "2019-08-08 09:20",
end: "2019-08-08 09:40",
type: "free"
},
{
title: "09:40",
start: "2019-08-08 09:40",
end: "2019-08-08 10:00",
type: "free"
},
{
title: "10:20",
start: "2019-08-08 10:20",
end: "2019-08-08 10:40",
type: "free"
},
{
title: "10:40",
start: "2019-08-08 10:40",
end: "2019-08-08 11:00",
type: "free"
},
]
}
]
});
calendar.render();
});
For this demo I only created handful of the "free" slots (because it was tedious to create them), but hopefully you can get the idea of how it would start to look with dozens of them all over the calendar. Of course again you can amend the CSS to your requirements.
Demo: https://codepen.io/ADyson82/pen/JgpNEX
(You can of course amend the CSS of this further to make it appear more like your desired look and feel.)
Addendum: Here's the OP's final version, for anyone who is interested in the end product - based on taking the above suggestions into consideration: https://codepen.io/hugo-trial/pen/rXdajv
I want fullCalendar to go to one a specifical day, but when I call
$('#calendarContainer').fullCalendar('gotoDate', date);
It only increment the view of the actual date by one.
My variable date is
var date =$.fullCalendar.moment(moment.utc(app.mCurrentStartDate).format('YYYY-MM-DD'));
My only way to make it work was to do
for (var i = 0; i < 100; i++)
{
$('#calendarContainer').fullCalendar('gotoDate', date);
}
But that is not possible.
My calendar use custom views
views: {
agendaThreeDay: {
type: 'agenda',
duration: { days: 3 },
buttonText: '3 day',
columnFormat: 'dddd D MMMM',
},
agendaTwoDay: {
type: 'agenda',
duration: { days: 2 },
buttonText: '2 day',
columnFormat: 'dddd D MMMM',
}
},
Do you know if this is the intented behaviour of gotoDate, or may be I use it the wrong way ?
Thanks.
I'm working in week mode and I want to limit visible time range to the earliest event on the week and the latest event on the week.
I guess the right way to solve the problem is to manually filter events that are visible in current week, find the mininum and maximum time and set them to minTime and maxTime property. The problem is that I don't see weekChanged callback (or something like that) which seems a right place to recalculate minTime and maxTime.
This was a lot more work than I expected, hope it works well enough for you. I'm basically doing what I suggested in the comments above.
Edit:
Changed code to improve performance so we don't have to wait for all of the calendar to render before finding out that we need to start all over again.
Note that to do this more effectively we would either have to implement a new callback because none of the existing ones seem to have clientEvents set already or calculate times from the events beforehand (which could get messy in case of timezones).
http://jsfiddle.net/3E8nk/555/
(function(c) {
var startedViewRender = true;
function greaterTime(first, second) {
//Assuming dates are the same year
if (first.clone().dayOfYear(0).isBefore(second.clone().dayOfYear(0)))
return second;
else
return first;
}
var calendarOptions = {
header: {
left: 'prev,next today',
center: 'title',
right: 'agendaWeek'
},
defaultView: 'agendaWeek',
minTime: '00:00:00',
maxTime: '24:00:00',
defaultDate: '2014-06-12',
defaultTimedEventDuration: '02:00:00',
editable: true,
events: [{
title: 'All Day Event',
start: '2014-06-01'
}, {
title: 'Long Event',
start: '2014-06-07',
end: '2014-06-10'
}, {
id: 999,
title: 'Repeating Event',
start: '2014-06-09T16:00:00'
}, {
id: 999,
title: 'Repeating Event',
start: '2014-06-16T16:00:00'
}, {
title: 'Meeting',
start: '2014-06-12T10:30:00',
end: '2014-06-12T12:30:00'
}, {
title: 'Lunch',
start: '2014-06-12T12:00:00'
}, {
title: 'Birthday Party',
start: '2014-06-13T07:00:00'
}, {
title: 'Click for Google',
url: 'http://google.com/',
start: '2014-06-28'
}],
viewRender: function(view) {
startedViewRender = true;
},
eventRender: function(event, element, view) {
if (!startedViewRender)
return;
else
startedViewRender = false;
if (view.name !== 'agendaWeek') {
console.log('not agendaWeek');
return;
}
var events = c.fullCalendar('clientEvents');
if (events.length === 0) {
console.log('no events at all');
//Set to default times?
return;
}
var visibleAndNotAllDayEvents = events.filter(function(event) {
//end not necessarily defined
var endIsWithin = event.end ? event.end.isWithin(view.start, view.end) : false;
return !event.allDay && (event.start.isWithin(view.start, view.end) || endIsWithin);
});
if (visibleAndNotAllDayEvents.length === 0) {
console.log('no visible not all day events');
//Set to default times?
return;
}
var earliest = visibleAndNotAllDayEvents.reduce(function(previousValue, event) {
return greaterTime(previousValue, event.start).isSame(previousValue) ? event.start : previousValue;
}, moment('23:59:59', 'HH:mm:ss'));
var latest = visibleAndNotAllDayEvents.reduce(function(previousValue, event) {
var end = event.end ? event.end.clone() : event.start.clone().add(moment(calendarOptions.defaultTimedEventDuration, 'HH:mm:ss'));
return greaterTime(previousValue, end);
}, moment('00:00:00', 'HH:mm:ss'));
if (calendarOptions.minTime !== earliest.format('HH:mm:ss') || calendarOptions.maxTime !== latest.format('HH:mm:ss')) {
//Reinitialize the whole thing
var currentDate = c.fullCalendar('getDate');
c.fullCalendar('destroy');
c.fullCalendar($.extend(calendarOptions, {
defaultDate: currentDate,
minTime: earliest.format('HH:mm:ss'),
maxTime: latest.format('HH:mm:ss')
}));
}
}
};
c.fullCalendar(calendarOptions);
})($('#calendar'));
You can do that by using eventAfterAllRender, which is executed after all events have been rendered
eventAfterAllRender: function(view) {
var evts = $("#calendar").fullCalendar( 'clientEvents'),
minTime = moment("2014-01-01 23:59:59").format("HH:mm:ss"),
maxTime = moment("2014-01-01 00:00:00").format("HH:mm:ss"),
currentDate = view.calendar.getDate(),
currentMinTime = view.calendar.options.minTime,
currentMaxTime = view.calendar.options.maxTime;
// lets calculate minTime and maxTime based on the week events
// if this event's minTime is 'before' than the minTime, set this as the minTime
for(var i in evts) {
minTime = timeDiff(minTime, evts[i].start.format("HH:mm:ss"), true);
maxTime = timeDiff(maxTime, evts[i].end.format("HH:mm:ss"), false);
}
// If minTime or maxTime don't match, recreate fullcalendar
// This is a pain in the ass : \
// We have to destroy and apply fullcalendar so this can work.
if (minTime != currentMinTime || maxTime != currentMaxTime) {
$("#calendar").fullCalendar('destroy');
$("#calendar").fullCalendar(
$.extend(fcOpts, {
defaultDate: currentDate,
minTime: minTime,
maxTime: maxTime
})
);
}
}
You will have to have a function to calculate which time is the lattest or earliest:
function timeDiff(time1, time2, getMin) {
var d1 = new Date('2014-01-01 ' + time1),
d2 = new Date('2014-01-01 ' + time2);
if (getMin) {
return d1.getTime(d1) - d2.getTime(d2) < 0 ? time1 : time2;
} else {
return d1.getTime(d1) - d2.getTime(d2) > 0 ? time1 : time2;
}
}
See the following JsFiddle for a working example.
I am using FullCalendar.js in my website. I have set events from backend. I want to change look of the day which has an event. In other words I need some sort of class where I have "fc-day" and an event in it.
My code looks like and you see it on jsFiddle:
$('#calendar').fullCalendar({
events: [{
title: 'event1',
start: '2013-01-01'
}, {
title: 'event2',
start: '2013-12-05',
end: '2013-12-07'
}, {
title: 'event3',
start: '2013-12-15'
}]
})
You can use eventRender() property of Full Canendar.
This works for me with fullcalendar v2:
$('#calendar').fullCalendar({
events: [
{
title : 'event1',
start : '2014-04-01'
},
{
title : 'event2',
start : '2014-04-05',
},
{
title : 'event3',
start : '2014-04-15'
}
],
eventRender: function (event, element, view) {
// like that
var dateString = moment(event.start).format('YYYY-MM-DD');
$('#calendar').find('.fc-day-number[data-date="' + dateString + '"]').css('background-color', '#FAA732');
}
});
Note: You will need Moment library for this.
I could not find a desired property or method to use in the documentation of Fullcalendar.
I came up with a kind of a messy solution: adding a class by data-attributes:
function addClassByDate(date) {
var dataAttr = getDataAttr(date);
$("[data-date='" + dataAttr + "']").addClass("hasEvent");
}
function getDataAttr(date) {
return date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + (date.getDate().toString().length === 2 ? date.getDate() : "0" + date.getDate());
};
It works fine for the settings, you've provided in your question.
The working example could be found here: http://jsfiddle.net/6NShN/9/
This is how I did it to give background color to each and every events.
JS FIDDLE DEMO
events: [
{
title: 'Test1',
start: new Date(2014, 2, 28, 12, 0),
end: new Date(2014, 2, 30, 12, 0),
backgroundColor: '#80ACED',
},
{
title: 'Test2',
start: new Date(2014, 2, 14, 3, 55),
end: new Date(2014, 2, 21, 12, 0),
backgroundColor: '#80ACED',
},
{
title: 'Test3',
start: new Date(2014, 2, 2, 12, 0),
end: new Date(2014, 2, 2, 12, 0),
backgroundColor: '#E82525',
}
]
Hope this helps.
Refer : http://arshaw.com/fullcalendar/docs/event_data/Event_Object/
Finally this is how it worked for me take a look at this
jsfiddle
$('#calendar').fullCalendar({
events: [
{
title : 'event1',
start : '2014-04-01'
},
{
title : 'event2',
start : '2014-04-05',
},
{
title : 'event3',
start : '2014-04-15'
}
],
eventRender: function (event, element, view) {
// like that
var dateString = $.fullCalendar.formatDate(event.start, 'yyyy-MM-dd');
view.element.find('.fc-day[data-date="' + dateString + '"]').css('background-color', '#FAA732');
}
});
weswesweswes is nearly correct view.element should be view.el
eventRender: function (event, element, view) {
var dateString = moment(event.start).format('YYYY-MM-DD');
view.el.find('.fc-day[data-date="' + dateString + '"]').addClass('fc-has-event');
}
None of these will work for >=v2.0, since fullCalendar started using moment.js for date formatting.
The following worked for me (passed to fullCalendar initialization function):
eventRender: function (event, element, view) {
var dateString = moment(event.start).format('YYYY-MM-DD');
view.element.find('.fc-day[data-date="' + dateString + '"]').addClass('fc-has-event');
}
You can add class on base of the fullcalender .fc-event class its not direct approach but its works.
Fiddle demo
$(document).ready(function (){
$(".fc-event").addClass("myclass");
});
Heres another Fiddle JS FIDDLE
Just by adding
textColor: 'white',
backgroundColor:'purple'
You can change the style
JS code:
$('#calendar').fullCalendar({
eventSources: [
// your event source
{
events: [
{
title : 'event1',
start : '2013-01-01'
},
{
title : 'event2',
start : '2013-12-05',
end : '2013-12-07'
},
{
title : 'event3',
start : '2013-12-15'
}],
textColor: 'white',
backgroundColor:'purple'
}
// any other event sources...
]
});
Fullcalendar v2, for agendaWeek view:
eventRender: function(event, element, view ){
if(view.name=='agendaWeek') {
var weekdays = new Array('sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat');
var eventweekday = $.fullCalendar.moment(event.start).format('d');
$('.fc-'+weekdays[eventweekday]).css('background-color', '#FFC');
}
},
Highlights all days with events.
Had this same issue and had found a bunch of solutions for older versions of FullCalendar (which seemed a bit hacky anyway). However, in v5 you can use eventDidMount and traverse up the DOM to the day cell.
JS Code:
eventDidMount: function(info) {
$(info.el).closest(".fc-daygrid-day").addClass("has-event");
}