I am trying to use this example -- https://fullcalendar.io/docs/other-calendar-dragging -- to create a page that shows 2 FullCalendar calendars and allows the user to drag events from one calendar to the other. I am able to render both calendars, and pull events for each via ajax from a php page. However, the events only display on the first calendar. If I comment out this line:
events: 'ajax/calendar.php?action=get_monthly_patrol_calendar'
from calendar1, then the events will display on calendar2 only. I'd really appreciate help to enable events to display on BOTH calendars.
FYI, here is my code:
HTML:
<div id="kt_calendar"></div>
<div id="kt_calendar2" ></div>
JS:
var todayDate = moment().startOf('day');
var show_now_indicator=true;
var YM = todayDate.format('YYYY-MM');
var YEAR = todayDate.format('YYYY');
var MONTH = todayDate.format('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');
var NEXT_MONTH = todayDate.clone().add(1, 'month').format('YYYY-MM-DD');
var cal = document.getElementById('kt_calendar');
var calendar = new FullCalendar.Calendar(cal, {
plugins: [ 'bootstrap', 'interaction', 'dayGrid', 'dayGridPlugin', 'timeGrid', 'list' ],
themeSystem: 'bootstrap',
events: 'ajax/calendar.php?action=get_monthly_patrol_calendar',
showNonCurrentDates:false,
isRTL: KTUtil.isRTL(),
contentHeight: 'auto',
//aspectRatio: 3, // see: https://fullcalendar.io/docs/aspectRatio
nowIndicator: show_now_indicator,
now: TODAY,
defaultDate: TODAY,
initialDate: TODAY,
defaultView: 'dayGridMonth',
eventOrder: 'order_by',
eventLimit: false, // true to allow "more" link when too many events
navLinks: true,
eventResizableFromStart: false, //Whether the user can resize an event from its starting edge.
eventDurationEditable: false, //Allow events’ durations to be editable through resizing.
eventResourceEditable: reschedule,//Determines whether the user can drag events between resources.
droppable:reschedule,//Determines if external draggable elements or events from other calendars can be dropped onto the calendar.
eventStartEditable: reschedule,//Allow events’ start times to be editable through dragging.
editable: reschedule, //Determines whether the events on the calendar can be modified.
eventDrop: function(info) {
reschedule_event(info);
},
eventClick: function(info) {
do_event_click(info);
},
eventRender: function(info) {
var element = $(info.el);
},
header: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,dayGridWeek,dayGridDay'
},
views: {
dayGridMonth: { buttonText: 'monthly' },
dayGridWeek: { buttonText: 'weekly' },
dayGridDay: { buttonText: 'daily' }
},
});
calendar.render();
var cal2 = document.getElementById('kt_calendar2');
var calendar2 = new FullCalendar.Calendar(cal2, {
plugins: [ 'bootstrap', 'interaction', 'dayGrid', 'dayGridPlugin', 'timeGrid', 'list' ],
themeSystem: 'bootstrap',
events: 'ajax/calendar.php?action=get_monthly_patrol_calendar',
showNonCurrentDates:false,
isRTL: KTUtil.isRTL(),
contentHeight: 'auto',
//aspectRatio: 3, // see: https://fullcalendar.io/docs/aspectRatio
nowIndicator: show_now_indicator,
now: NEXT_MONTH,
defaultDate: NEXT_MONTH,
initialDate: NEXT_MONTH,
defaultView: 'dayGridMonth',
eventOrder: 'order_by',
eventLimit: false, // true to allow "more" link when too many events
navLinks: true,
eventResizableFromStart: false, //Whether the user can resize an event from its starting edge.
eventDurationEditable: false, //Allow events’ durations to be editable through resizing.
eventResourceEditable: reschedule,//Determines whether the user can drag events between resources.
droppable:reschedule,//Determines if external draggable elements or events from other calendars can be dropped onto the calendar.
eventStartEditable: reschedule,//Allow events’ start times to be editable through dragging.
editable: reschedule, //Determines whether the events on the calendar can be modified.
eventDrop: function(info) {
reschedule_event(info);
},
eventClick: function(info) {
do_event_click(info);
},
eventRender: function(info) {
var element = $(info.el);
},
header: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,dayGridWeek,dayGridDay'
},
views: {
dayGridMonth: { buttonText: 'monthly' },
dayGridWeek: { buttonText: 'weekly' },
dayGridDay: { buttonText: 'daily' }
},
});
calendar2.render();
Figured it out! The second call was failing bec it was running before the first call completed. I added a delay before loading the 2nd calendar, and now both months load fine:
setTimeout(function() { loadCal2(); }, 3000);
I have 2 panels in 'timeline' full-calendar, 1st panel showing users and 2nd panel showing all the events but now I want to show number of events(in bold) also for the every user just after the user name in 1st panel. How can I achieve this? Help is highly appreciated.
Sample Code :
$('#calendar').fullCalendar({
defaultView: 'timelineYear',
header: {
left: 'prev,next',
center: 'title',
},
resources: getJSonObject(jsonUser),
events: getJSonObject(jsonEvent),
});
I am able to solve the problem using resorceRender. Just send json from controller and pass it to resourcejson in fullcalender
$('#calendar').fullCalendar({
displayEventTime: false,
defaultView: 'timelineYear',
header: {
left: 'prev,next',
center: 'title',
},
resources: getJSonObject(users),
resourceRender: function (users, $td) {
$td.find('.fc-cell-text').append($(''+users.count+''));
},
events: getJSonObject(events),
});
I had spent three days reading documentation, and like six days testing ways to do what we want to fulfill.
I still don't know how to emulate the view more...
Here is a piece of the code I have so far (Is really long)
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: ''
},
navLinks: true,
timeFormat: 'h:mm A',
editable: true,
eventLimit: true,
eventOrder: "-sorting",
events: [
/* Lot of Events Here */
],
eventRender: function(event, element) {
$(element).hide();
$(".fc-day").on('click',function(){
console.log($(this));
});
});
The question per se would be how do we trigger the view more when clicking the day box (not the event)???
$('#calendars').fullCalendar({
header: { left: 'agendaDay,agendaWeek,month', center: 'title', right: 'prev,next' },
defaultDate: moment(deteDefault, "YYYY MM DD"),
editable: false,
ignoreTimezone: false,
eventLimit: true, // allow "more" link when too many events firstDay: firstDay.getfirstDay(),
events: { url: $base_path, error: function() { $('#script-warning').show(); } } });
This is my code when events become more then it shows a link "+more" on full-calendar and on click over that shows other events. But in my case its not working in Mobile view as show in desktop view.If have any idea how this will work,please help. Thanks in advance
Using fullcalendar, I have events on each day. How do I go about hiding those events? I do apologize if this is an duplicate question. Example:
After entering the code that #CodeRomeos has given. Here is the result:
Another note: the style.css files have not been changed and I pulled them from,
https://github.com/angular-ui/ui-calendar
If I do the following to the code, ALL events are hidden. I only need events on the monthView to be hidden.
There was no solution posted nor I found an exact solution. A work around is the following:
$scope.uiConfig = {
calendar:{
height: 450,
editable: false,
selectable: true,
header:{
left: 'title',
center: '',
right: 'month today prev,next'
},
viewRender: function(view){
$('#myCalendar1').fullCalendar('removeEvents');
},
eventClick: $scope.alertOnEventClick,
eventDrop: $scope.alertOnDrop,
eventResize: $scope.alertOnResize,
eventRender: $scope.eventRender,
dayClick: $scope.alertOnDateClick,
timeClick: $scope.alertTest,
eventWipe: $scope.eventWipe
}
};