Develop Reference

Change view when windowResize triggers

I am trying to update Fullcalender view, when the calender resizes.
I am using windowResize event.
This is how it looks now.
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('kt_calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
plugins: [ 'bootstrap', 'interaction', 'dayGrid', 'timeGrid', 'list' ],
defaultView: 'timeGridWeek',
views: {
timeGridWeek: {
buttonText: 'week',
dayCount: 4,
duration: { days: 4 },
},
test: {
buttonText: 'week',
dayCount: 1,
duration: { days: 1 },
},
abc: {
buttonText: 'week',
dayCount: 2,
duration: { days: 2 },
}
},
windowResize: function(view) {
this.changeView("test");
}
});
calendar.render();
});
windowResize does trigger as it should, but i get this error:
The FullCalendar view "test" does not exist. Make sure your plugins
are loaded correctly
Am I not defining the custom views correct or what am i missing?

After a bit of testing it appears that if you correctly define your custom view with the type property, as documented at https://fullcalendar.io/docs/v4/custom-view-with-settings, then it doesn't throw the error.
views: {
timeGridWeek: {
buttonText: 'week',
dayCount: 4,
duration: { days: 4 },
},
test: {
type: 'timeGrid',
buttonText: 'week',
dayCount: 1,
duration: { days: 1 },
},
abc: {
type: 'timeGrid',
buttonText: 'week',
dayCount: 2,
duration: { days: 2 },
}
(N.B. It shouldn't be needed for the timeGridWeek one since you've simply overwritten the name of a view which is already available in the timeGrid plugin).
Demo: https://codepen.io/ADyson82/pen/ZEWKXRL

Events are not displayed with timeline plugin

i try to display events with timeline plugin. I only see the start date. first image
plugins: [ 'timeline' ],
views: {
timelineThreeYear: {
type: 'timeline',
duration: { year: 3 },
buttonText: '3 ans'
}
},
timeZone: 'local',
height: 400,
defaultView: 'timelineThreeYear',
aspectRatio: 0.5,
header: {
left: 'prev,next',
center: 'title',
right: 'timelineMonth,timelineYear,timelineThreeYear',
},
timeline view
with the same events, with daygrid plugin, i see the events.second image
i don't understand the problem.
plugins: [ 'dayGrid' ],
timeZone: 'UTC',
defaultView: 'dayGridMonth',
editable: true,
daygridMonth view

How do I customise time slots in full calendar?

I am using full-calendar from fullcalendar.io and having some trouble customizing its time slot.
I want to add time slots like breakfast, lunch, dinner etc also user can add his/her own slots. How do I set the fixed height according to the number of slots? Also, I want to set the slot column text for breakfast, lunch etc. not 12 am, 6 am. Here's what I did until now:
var today = moment();
$('#calendar').fullCalendar({
droppable: true,
defaultView: 'Week',
header: false,
defaultDate: today,
navLinks: false, // can click day/week names to navigate views
editable: true,
eventLimit: true, // allow "more" link when too many events
schedulerLicenseKey: 'GPL-My-Project-Is-Open-Source',
/*events: [
{
title : 'event1',
start : today,
imageurl:'assets/images/recipe/salad.jpg'
}
],*/
/*views: {
agendaWeek: {
agendaEventMinHeight: 150,
allDaySlot: false,
slotLabelInterval: { hours: 6},
slotDuration: { hours: 1},
duration: { days: 7}
}
},*/
eventRender: function (event, element) {
element.find(".fc-event-title").remove();
element.find(".fc-event-time").remove();
var new_description = '#';
element.append(new_description);
},
now: today,
/*header: {
left: 'promptResource',
center: '',
right: ''
},*/
footer: {
left: 'promptResource',
center: '',
right: ''
},
customButtons: {
promptResource: {
text: '+ add course',
click: function() {
var title = prompt('Course name');
if (title) {
$('#calendar').fullCalendar(
'addResource',
{ title: title },
true // scroll to the new resource?
);
}
}
}
},
views: {
Week: {
type: 'timeline',
duration: { Days: '7' },
slotLabelInterval: { hours: 24},
slotDuration: { hours: 24},
}
},
resourceLabelText: 'Meal',
resourceRender: function(resource, cellEls) {
cellEls.on('click', function() {
if (confirm('Are you sure you want to delete ' + resource.title + '?')) {
$('#calendar').fullCalendar('removeResource', resource);
}
});
},
resources: [
{ id: 'a', title: 'Breakfast' , eventColor: 'red'},
{ id: 'b', title: 'Lunch', eventColor: 'green' },
{ id: 'c', title: 'Dinner', eventColor: 'orange' },
{ id: 'd', title: 'Other', eventColor: 'grey'},
],
events: [
{ id: '1', resourceId: 'b', start: today, end: today, title: 'event 1' },
{ id: '2', resourceId: 'c', start: '2018-04-07T05:00:00', end: '2018-04-07T22:00:00', title: 'event 2' },
{ id: '3', resourceId: 'd', start: '2018-04-06', end: '2018-04-08', title: 'event 3' },
{ id: '4', resourceId: 'e', start: '2018-04-07T03:00:00', end: '2018-04-07T08:00:00', title: 'event 4' },
{ id: '5', resourceId: 'f', start: '2018-04-07T00:30:00', end: '2018-04-07T02:30:00', title: 'event 5' }
]
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.css" data-print="true" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar-scheduler/1.9.4/scheduler.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar-scheduler/1.9.4/scheduler.min.css" />
<div id="calendar"></div>
Any help would be really appreciated.
Edit:
Here's what I actually want to implement.
In design, you can see that the time of the day is not important. I want the users to add as many meals a day as they can. I just a want the option to add the meal's title(event). And remove the time slots on the left side.
update:
I've managed to solve this problem to some extent. Here's how it looks now:
But still, there are some problems like how can I change the date format in columnHeader and how can I give fix size to row and columns?

FullCalendar v1.6.0 Events

I have the following code which works in FullCalendar v2.4.0:
$('#calendar').fullCalendar({
header: {
center: 'title',
left: 'nothing',
right: 'nothing'
},
selectable: false,
defaultView: 'month',
titleFormat: 'MMMM',
events: [{
start: "2018-03-01",
end: "2018-03-01",
rendering: "background",
color: "red"
}]
});
https://jsfiddle.net/5x2dL5Ls/74/
How could I do the same but with FullCalendar v1.6.0? (I have to do it with that version :-/)

Full Calender + Right Click is not working on the cell when events are added

I am using Full Calender JQuery Plugin for displaying my user's daily activity. I have added one drop-down menu when user right click on any cell. But I have an issue with that when we add an event on any cell. When we add an event on any cell then it will create a on the whole row, So I am not able to add open drop-down menu on whole row.
It's displayed on the attached image. On red portion i may not able to open drop-down on right click.
Code
$(document).contextmenu({
delegate: ".hasmenu",
autoFocus: true,
preventContextMenuForPopup: true,
preventSelect: true,
taphold: true,
menu: [{
title: "Block Date",
cmd: "block",
uiIcon: ""
}],
// Handle menu selection to implement a fake-clipboard
select: function (event, ui) {
// Block Date Code
},
// Implement the beforeOpen callback to dynamically change the entries
beforeOpen: function (event, ui) {
// Optionally return false, to prevent opening the menu now
}
});
$('#my-calendar').fullCalendar({
buttonText: {
today: 'Today',
month: 'Month',
week: 'Week',
day: 'Day',
list: 'List'
},
header: {
left: 'month,basicWeek,basicDay',
center: 'prev, title, next',
right: 'month,basicWeek,basicDay'
},
timeFormat: 'H:mm',
navLinks: true, // can click day/week names to navigate views
editable: false,
eventLimit: true, // allow "more" link when too many events
eventClick: function(event, jsEvent, view) {
// Code for display popup for event
},
dayRender: function (day, cell) {
// Code for add hasmenu class for open context menu on right click
},
events: [
{
title: 'All Day Event',
start: '2017-07-01',
color: '#000'
},
{
title: 'Long Event',
start: '2017-07-07',
end: '2017-07-10'
},
{
id: 999,
title: 'Repeating Event',
start: '2017-07-09T16:00:00'
},
{
id: 999,
title: 'Repeating Event',
start: '2017-07-16T16:00:00'
},
{
title: 'Conference',
start: '2017-07-11',
end: '2017-07-13'
},
{
title: 'Meeting',
start: '2017-07-12T10:30:00',
end: '2017-07-12T12:30:00'
},
{
title: 'Lunch',
start: '2017-07-12T12:00:00'
},
{
title: 'Meeting',
start: '2017-07-12T14:30:00'
},
{
title: 'Happy Hour',
start: '2017-07-12T17:30:00'
},
{
title: 'Dinner',
start: '2017-07-12T20:00:00'
},
{
title: 'Birthday Party',
start: '2017-07-13T07:00:00'
},
{
title: 'Click for Google',
url: 'http://google.com/',
start: '2017-07-28'
}
]
});