We Keep Coding

Sync FullCalendar With Another FullCalendar Same Page

Using FullCalendar I am able to display 2 calendars on the same page. Calendar1 has all the controls to switch views from Day, Week, Month, Year plus the arrows to go forward/backwards. Calendar2 is a listMonth with no controls showing. It works fine on load but I would like it to change when Calendar1 changes from month to month or year to year.
Is this possible? I haven't found anything that would allow me to change the listMonth when the month/year changes on Calendar1.
jQuery(document).ready(function () {
$('#calendar1').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'agendaDay,agendaWeek,month,listYear'
},
views: {
listYear: { buttonText: 'Year'}
},
navLinks: true, // can click day/week names to navigate views
selectable: true,
selectHelper: true,
editable: false,
eventLimit: true, // allow "more" link when too many events
events: "CalendarData.ashx",
eventColor: '#038ddd'
});
$('#calendar2').fullCalendar({
header: {
left: '',
center: '',
right: ''
},
views: {
listMonth: { buttonText: 'Month' }
},
defaultView: 'listMonth',
navLinks: true, // can click day/week names to navigate views
selectable: true,
selectHelper: true,
editable: false,
eventLimit: true, // allow "more" link when too many events
events: "CalendarData.ashx",
eventColor: '#038ddd'
});
});

I had a need to implement this recently to sync a grid and list view. I came across this question, but the suggested comments no longer appear valid. Here is a simple solution I used.
This is the simple html container for both calendars.
<div>
<div id="calendarGrid"></div>
<div id="calendarList"></div>
</div>
Below is the javascript code to hook into the "datesSet" method that triggers as the user navigates through the calendar and sets the date for the "other" calendar to keep it in sync, including a date comparison to prevent an infinite loop.
var calendarElGrid = document.getElementById('calendarGrid');
var calendarElList = document.getElementById('calendarList');
var calendarGrid = new FullCalendar.Calendar(calendarElGrid, {
initialView: 'dayGridMonth',
datesSet: function (info) {
syncCalendar(calendarList, info.start);
}
});
calendarGrid.render();
var calendarList = new FullCalendar.Calendar(calendarElList, {
initialView: 'listMonth',
datesSet: function (info) {
syncCalendar(calendarGrid, info.start);
}
});
calendarList.render();
function syncCalendar(otherCalendar, startDate) {
if (otherCalendar.getDate().toDateString() != startDate.toDateString()) {
otherCalendar.gotoDate(startDate);
}
}
Solution is based off of v6.0.2 documentation here:
https://fullcalendar.io/docs/datesSet

jquery FullCalendar custom recurring events

Im using FullCalendar jquery library for creating events.
The requirement here is to create recurring events every x days.
For example create an event that is recurring on each second Monday (every 14 days in this case).
Currently the library supports weekly or monthly recurring events.
How can I achieve this?

I think #CBroe is correct, you could achive this using your own logic.
To add events to the calendar you must first populate an array of events, this can then be bound to the calendars events property.
For example:
var events = getEvents();
$('#myCalendar').fullCalendar({
themeSystem: 'bootstrap3',
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay,listMonth'
},
weekNumbers: true,
weekends: false,
navLinks: true, // can click day/week names to navigate views
editable: true,
eventStartEditable: false,
height: 'auto',
eventLimit: true, // allow "more" link when too many events
events: events,
viewRender: function (view, element) {
events = getEvents();
$('#myCalendar').fullCalendar('removeEvents');
$('#myCalendar').fullCalendar('addEventSource', events);
},
});
function getEvents(){
var events = [];
var arrayOfDates; //Populate dates at intervals of 14 days
$.each(arrayOfDates, function () {
var date = this;
//Create event
events.push({
title: 'myEvent',
start: date,
end: date,
allDay: true,
color: '#228B22',
stick: true
});
});
}
return events;
}
Well something like that anyway.. this should give you a good starting point

Fullcalendar - Half Hour Event Title Issue

The answer at Fullcalendar event's end time is missing is for an older version of fullcalendar. It's not the answer I want.
In my fullcalendar application, when I create a "half-an-hour" event it just show only event start time and title at week view.
For one hour and longer events, there are no problems I encounter. It only happens at "half-an-hour" events. So, I don't know if this is a feature or not.
I want my events to be displayed like "08:00 - 08:30" (start - end) even for half an hour events.
My code:
var calendar = $('#calendar').fullCalendar({
allDaySlot: false,
eventOverlap: false,
selectOverlap: false,
editable: false,
eventStartEditable: false,
eventDurationEditable: false,
timezone: 'local',
timeFormat: "HH:mm",
minTime: "08:00:00",
maxTime: "20:00:00",
header: header,
selectable: true,
selectHelper: false,
defaultView: "agendaWeek",
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay,listMonth'
},
view: {
agendaWeek: {
columnFormat: "M/D [(]ddd[)]"
}
},
select: function(start, end, allDay) {
...
}
eventClick: function(calEvent, jsEvent, view) {
...
}
});
ScreenShot (SS):
Note: Sometimes even event titles cannot be seen in the week view of Fullcalendar.

I cant get data from day where I drop in full calendar

I have this fullcalendar:
$('#calendar').fullCalendar({
height: 700,
locale: 'es',
header: {
left: 'prev,next, month basicWeek today',
center: 'title',
right: ''
},
buttonText: {
today: 'Hoy',
month: 'Mes',
week: 'Semana'
},
editable: true,
weekends: true,
droppable: true, // this allows things to be dropped onto the calendar
dragRevertDuration: 0,
events: $scope.events,
drop: function(date, jsEvent, ui, resourceId) {
console.log("DROP!")
}
});
I would like in drop event, get data of this day.
I drag event and drop in day 1, that it has an event called "Carmen Donoso | BAJA", and when I drop it I would like to get this event.
Thanks

Why FullCalendar doesn't display hours beside?

The calendar doesn't display hours beside .
i have uploaded a picture and put the code to understand the problem more
how can i correct it ?
Code javascript :
$(document).ready(function () {
var date = new Date();
// the code display the calendar
$('#calendar').fullCalendar({
// the header
header:{
left: 'prev,next today',
center: 'title',
right: 'agendaWeek,agendaDay'
},
defaultView: 'agendaWeek',
lang: 'fr',
buttonIcons: false, // show the prev/next text
editable: true, // resize event
eventLimit: true, // allow "more" link when too many events
minTime: '06:00:00',
maxTime: '20:00:00',
eventRender: function (event, element) {
element.find('.fc-title').append(" || " + event.type);
},
dayClick: function (date, jsEvent, view, resourceObj) {
//getting the clicked date from calendar
},
eventClick: function (calEvent) {
// event clicked
},
// events redered in twig template
// I an working with symfony
events:{{ events|raw }}
})
});

thank you very much i'm using fc-time{ display: none;} it's working now