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
Related
i using resourceTimelinePlugin, and always it displayed 7 days in the header, i need change that, how can i do that?
my calendar
my calendarOptions json:
calendarOptions: CalendarOptions = {
plugins: [resourceTimelinePlugin, interactionPlugin, momentPlugin],
schedulerLicenseKey: ConstanteCalendario.schedulerLicenseKey,
headerToolbar: {
left: "today prev,next",
center: "title",
right: "",
},
initialView: OpcionVistaCalendarioEnum.LineaTiempoRecursoSemana,
slotLabelFormat: [
{ weekday: "short", day: "2-digit" }, // lower level of text
],
firstDay: moment().day(),
resourceAreaColumns: [
{
field: "nombreJuez",
headerContent: "Jueces",
},
],
editable: true,
selectable: true,
unselectAuto: true,
slotDuration: { days: 1 },
droppable: true,
locale: "es",
views: {
resourceTimelinePlugin: {
type: 'timelineWeek',
},
week: {
titleFormat: { year: "numeric", month: "long", day: "2-digit" },
titleRangeSeparator: " hasta ",
},
},
timeZone: ConstanteCalendario.timeZone,
displayEventTime: false,
You can modify the duration of a custom view using 'duration', see https://fullcalendar.io/docs/duration.
For instance, if you want to set up a separate view which allows you to view more days you can do that using https://fullcalendar.io/docs/v3/timeline-view.
e.g.
type: 'resourceTimeline',
duration: { days: 3 },
buttonText: '3 days'
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
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?
I use FullCalendar to generate my agenda with 3 sections each day. I add attribute groupByDateAndResource and resources like there:
$('#calendar').fullCalendar({
header: {
left: 'prev,next',
center: 'title',
right: 'agendaWeek,agendaDayTrucks'
},
views: {
agendaDayTrucks: {
type: 'agenda',
duration: { day: 1 },
buttonText: 'Truck View Per Day'
}
},
buttonText: {
week: 'Week View'
},
nowIndicator: true,
defaultView: 'agendaWeek',
defaultDate: moment().format('YYYY-MM-DD'),
slotDuration: '01:00:00',
snapDuration: '00:05:00',
groupByDateAndResource: true,
resources: [
{ id: 'truck1', title: 'Truck 1' },
{ id: 'truck2', title: 'Truck 2' },
{ id: 'truck3', title: 'Truck 3' }
]
...
});
My calendar show perfectly, but my columns doesn't divided in 3 sections. See image
How can I make divide all my days in sections with FullCalendar.js?
Thanks!
SOLUTION:
I installed extension scheduler.js. This extension of FullCalender display all my resources exactly like I want.
You need to do like this, This is in header, and in body you will have to divide cells again.
$('#calendar').fullCalendar({
header: {
left: 'prev,next',
center: 'title',
right: 'agendaWeek,agendaDayTrucks'
},
groupByDateAndResource: true,
views: {
agendaDayTrucks: {
type: 'agenda',
duration: { day: 1 },
buttonText: 'Truck View Per Day'
}
},
buttonText: {
week: 'Week View'
},
nowIndicator: true,
defaultView: 'agendaWeek',
defaultDate: moment().format('YYYY-MM-DD'),
slotDuration: '01:00:00',
snapDuration: '00:05:00',
groupByDateAndResource: true,
resources: [
{ id: 'truck1', title: 'Truck 1' },
{ id: 'truck2', title: 'Truck 2' },
{ id: 'truck3', title: 'Truck 3' }
]
...
});
you have to put groupByDateAndResource: true
https://fullcalendar.io/docs/v3/groupByDateAndResource
I know how to initilize the view of FullCalendar, in particular when my page is load I do:
$('#calendar').fullCalendar({
'defaultView': 'multiColAgendaWeek',
'height': BackendCalendar.getCalendarHeight(),
'editable': true,
'firstDay': 1, // Monday
'slotMinutes': 30,
'snapMinutes': 15,
'axisFormat': 'HH:mm',
'timeFormat': 'HH:mm{ - HH:mm}',
'allDayText': EALang['all_day'],
'columnFormat':
{
'month': 'ddd',
'week': 'ddd D',
'day': 'dddd'
},
'titleFormat':
{
'month': 'MMMM YYYY',
'week': "MMM D YYYY",
'day': 'MMMM D YYYY'
},
'header':
{
'left': 'prev,next today',
'center': 'title',
'right': 'multiColAgendaDay,multiColAgendaWeek,month'
},
'views':
{
'multiColAgendaDay':
{
'type': 'multiColAgenda',
'duration': { days: 1},
'columns':
[
{ id:1, name: 'Op1' },
{ id:2, name: 'Op2' }
]
},
'multiColAgendaWeek':
{
'type': 'multiColAgenda',
'duration': { weeks: 1 },
'columns': [
{ id: 1, name: 'Op1' },
{ id: 2, name: 'Op2' }
]
}
},
I'm using this extension: https://github.com/mherrmann/fullcalendar-columns/issues/1 that add the resource support. Anyway, What I'm trying to do is change the columns parameter content through code. The columns property is inside the two available view multiColAgendaDay and multiColAgendaWeek. I've a method that's populate the calendar with all the appointments available, this method doesn't reload the page 'cause use an ajax request. All working fine, but I want to add in this method a redraw of the columns available, in particular inside the population method at the top of all redrawing the calendar view:
$('#calendar').fullCalendar({
views:
{
'multiColAgendaDay':
{
'type': 'multiColAgenda',
'duration': { days: 1 },
'columns':
[
{ id: 1, name: 'First Column' },
{ id: 2, name: 'Second Column' }
]
}
},
'multiColAgendaWeek':
{
'type': 'multiColAgenda',
'duration': { weeks: 1 },
'columns':
[
{ id: 1, name: 'First Column' },
{ id: 2, name: 'Second Column' }
]
}
});
The problem's that the calendar isn't redrawed and after this code execution the result is ever like this:
I don't know what I'm doing wrong, maybe the calendar can't redraw the view without a page reload? How I can fix this?
In some case render will not works. I have problem such like that so i made a separate method for this. In my case i have passed Json Array on each refresh so, i have first call the method to get array and then add this line:
$("#calendar").fullCalendar('destroy');
and then create calendar instance and passed Json array to events.