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?
Related
As you can see in this javascript fullcalendar code, I want to display all past data in title and hide all future data in fullcalendar title.. the future data will show on its date. I'm beginner can you help me that how to hide future data in title.
Thanks.
var calendar = new FullCalendar.Calendar( calendarEl, {
headerToolbar: {
left: 'title',
center: '',
right: 'prev,next'
},
initialDate: '2022-04-01',
dayMaxEvents: true,
events: [
{
title: '8',
start: '2022-04-13',
},
{
title: '9',
start: '2022-04-14',
},
{
title: '6',
start: '2022-04-15',
},
{
title: '4',
start: '2022-04-18',
},
{
title: '6',
start: '2022-04-19',
},
{
title: '3',
start: '2022-04-20',
},
{
title: '3',
start: '2022-04-21',
},
{
title: '3',
start: '2022-04-22',
},
{
title: '3',
start: '2022-04-25',
},
{
title: '3',
start: '2022-04-26',
},
{
title: '3',
start: '2022-04-27',
}
]
});
Use Array.prototype.filter to filter events starting after now.
var calendar = new FullCalendar.Calendar(calendarEl, {
headerToolbar: {
left: 'title',
center: '',
right: 'prev,next'
},
initialDate: '2022-04-01',
dayMaxEvents: true,
events: [
{
title: '8',
start: '2022-04-13',
},
{
title: '9',
start: '2022-04-14',
},
{
title: '6',
start: '2022-04-15',
},
{
title: '4',
start: '2022-04-18',
},
{
title: '6',
start: '2022-04-19',
},
{
title: '3',
start: '2022-04-20',
},
{
title: '3',
start: '2022-04-21',
},
{
title: '3',
start: '2022-04-22',
},
{
title: '3',
start: '2022-04-25',
},
{
title: '3',
start: '2022-04-26',
},
{
title: '3',
start: '2022-04-27',
}
].filter(event => new Date(event.start).getTime() < Date.now())
});
You can also refactor this operation into a function like so:
function filterFutureEvents(events) {
return events.filter(event => new Date(event.start).getTime() < Date.now());
}
// usage
const fileteredEvents = filterFutureEvents([/* ... */]);
I just want to add the border style to one of the events but not all events in full Calendar. Any help?
changes are like want to add the border styles to the event for the fullcalendar.changes are like want to add the border styles to the event for the full calendar.
Only add the border style to the single event for the calendar.
Only add the border style to the single event for the calendar.
<script>
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
plugins: [ 'interaction', 'resourceDayGrid', 'resourceTimeGrid' ],
defaultView: 'resourceTimeGridDay',
defaultDate: '2019-08-07',
editable: true,
selectable: true,
eventLimit: true, // allow "more" link when too many events
header: {
left: 'prev,next today',
center: 'title',
right:
'resourceTimeGridDay,resourceTimeGridTwoDay,timeGridWeek,dayGridMonth'
},
views: {
resourceTimeGridTwoDay: {
type: 'resourceTimeGrid',
duration: { days: 2 },
buttonText: '2 days',
}
},
//// uncomment this line to hide the all-day slot
//allDaySlot: false,
resources: [
{ id: 'a', title: 'Room A', eventColor: 'pink' },
{ id: 'b', title: 'Room B', eventColor: 'green' },
{ id: 'c', title: 'Room C', eventColor: 'orange' },
{ id: 'd', title: 'Room D', eventColor: 'red' }
],
events: [
{ id: '1', resourceId: 'a', start: '2019-08-06', end: '2019-08-
08', title: 'event 1' },
{ id: '2', resourceId: 'a', start: '2019-08-07T09:00:00', end:
'2019-08-07T14:00:00', title: 'event 2' },
{ id: '3', resourceId: 'b', start: '2019-08-07T12:00:00', end:
'2019-08-08T06:00:00', title: 'event 3' },
{ id: '4', resourceId: 'c', start: '2019-08-07T07:30:00', end:
'2019-08-07T09:30:00', title: 'event 4' },
{ id: '5', resourceId: 'd', start: '2019-08-07T10:00:00', end:
'2019-08-07T15:00:00', title: 'event 5' }
],
select: function(arg) {
console.log(
'select',
arg.startStr,
arg.endStr,
arg.resource ? arg.resource.id : '(no resource)'
);
},
dateClick: function(arg) {
console.log(
'dateClick',
arg.date,
arg.resource ? arg.resource.id : '(no resource)'
);
}
});
calendar.render();
});
</script>
<style>
#a {
border-color: 5px dashed yellow;
}
body {
margin: 0;
padding: 0;
font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
font-size: 14px;
}
#calendar {
max-width: 900px;
margin: 50px auto;
}
</style>
</head>
<body>
<div id='calendar'></div>
</body>
</html>
Only add the border style to the single event for the calendar.
You may use "borderColor" option within the event as follow:
events: [
{ id: '1', resourceId: 'a', start: '2019-08-06', end: '2019-08-
08', title: 'event 1', borderColor: '#0000ff' },
{ id: '2', resourceId: 'a', start: '2019-08-07T09:00:00', end:
'2019-08-07T14:00:00', title: 'event 2' },
{ id: '3', resourceId: 'b', start: '2019-08-07T12:00:00', end:
'2019-08-08T06:00:00', title: 'event 3' },
{ id: '4', resourceId: 'c', start: '2019-08-07T07:30:00', end:
'2019-08-07T09:30:00', title: 'event 4' },
{ id: '5', resourceId: 'd', start: '2019-08-07T10:00:00', end:
'2019-08-07T15:00:00', title: 'event 5' }
]
Please note I have added 'borderColor' option in First Event.
And you may use eventRender to apply border style as follows:
eventRender: function (info) {
var eventId = info.event.id;
if (eventId == '1')
{
$(info.el).css("border-style", "dashed");
$(info.el).css("border-color", "#ffff00");
}
}
i have role.
when user click block box. box will be selection 2 box after box clicked (like drag selected by mouse).
if 2 box have one or more union some event. selected to fail. (make sure 2 box is available box) but i stuck how to do it.
i want to build registration building for event. and this is interface to get time to registration.
$('#calendar').fullCalendar({
defaultView: 'agendaWeek',
selectable: true,
eventLimit: true, // allow "more" link when too many events
allDaySlot: false,
editable: false,
selectAllow: function(selectInfo) {
var duration = moment.duration(selectInfo.end.diff(selectInfo.start));
console.log(selectInfo.end);
return duration.asHours() <= 1;
},
selectMinDistance: 0,
header: {
left: 'prev',
center: 'title',
right: 'next'
},
eventMouseover: function(event, jsEvent, view) {},
validRange: function(nowDate) {
nowDate = nowDate.clone().add(-1, 'day');
return {
start: nowDate,
end: nowDate.clone().add(1, 'months')
};
},
businessHours: [{
dow: [1], // Monday - Friday
start: '08:00',
end: '12:00',
}, {
dow: [4, 5], // Monday - Friday (if adding lunch hours)
start: '13:00',
end: '17:00',
}],
selectConstraint: "businessHours",
resources: [{
id: 'b',
title: '',
eventColor: 'green'
}, ],
events: [{
id: '2',
resourceId: 'b',
start: '2018-10-27T09:00:00',
end: '2018-10-27T10:00:00'
},
{
id: '3',
resourceId: 'b',
start: '2018-11-28T12:00:00',
end: '2018-11-28T06:00:00'
},
{
id: '4',
resourceId: 'b',
start: '2018-10-29T07:30:00',
end: '2018-10-29T09:30:00'
},
{
id: '5',
resourceId: 'b',
start: '2018-10-29T10:00:00',
end: '2018-10-29T15:00:00'
}
],
select: function(start, end, jsEvent, view, resource) {
console.log(
'select ted',
start.format(),
end.format(),
resource ? resource.id : '(no resource)'
);
},
});
});
i have snippet
$(function() { // document ready
$('#calendar').fullCalendar({
defaultView: 'agendaWeek',
selectable: true,
eventLimit: true, // allow "more" link when too many events
allDaySlot: false,
editable: false,
selectAllow: function(selectInfo) {
var duration = moment.duration(selectInfo.end.diff(selectInfo.start));
console.log(selectInfo.end);
return duration.asHours() <= 1;
},
selectMinDistance: 0,
header: {
left: 'prev',
center: 'title',
right: 'next'
},
eventMouseover: function(event, jsEvent, view) {},
validRange: function(nowDate) {
nowDate = nowDate.clone().add(-1, 'day');
return {
start: nowDate,
end: nowDate.clone().add(1, 'months')
};
},
businessHours: [{
dow: [1], // Monday - Friday
start: '08:00',
end: '12:00',
}, {
dow: [4, 5], // Monday - Friday (if adding lunch hours)
start: '13:00',
end: '17:00',
}],
selectConstraint: "businessHours",
resources: [{
id: 'b',
title: '',
eventColor: 'green'
}, ],
events: [{
id: '2',
resourceId: 'b',
start: '2018-10-27T09:00:00',
end: '2018-10-27T10:00:00'
},
{
id: '3',
resourceId: 'b',
start: '2018-11-28T12:00:00',
end: '2018-11-28T06:00:00'
},
{
id: '4',
resourceId: 'b',
start: '2018-10-29T07:30:00',
end: '2018-10-29T09:30:00'
},
{
id: '5',
resourceId: 'b',
start: '2018-10-29T10:00:00',
end: '2018-10-29T15:00:00'
}
],
select: function(start, end, jsEvent, view, resource) {
console.log(
'select ted',
start.format(),
end.format(),
resource ? resource.id : '(no resource)'
);
},
});
});
.fc-time-grid .fc-event,
.fc-time-grid .fc-bgevent {
width: calc(100% + 4px);
margin-left: -2px;
border-radius: 0px;
}
<html>
<head>
<title></title>
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar-scheduler/1.9.4/scheduler.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar-scheduler/1.9.4/scheduler.js"></script>
</head>
<body>
<div id="calendar"></div>
</body>
</html>
I am using jQuery 2.0.0+, Moment 2.9.0+ in my project. I am unable to add resources into dayview. This is my coding
schedulerLicenseKey: 'CC-Attribution-NonCommercial-NoDerivatives',
defaultView : 'agendaDay',
defaultDate : '2018-04-07',
editable : true,
selectable : true,
eventLimit : true, // allow "more" link when too many events
header : {
left : 'prev,next today',
center : 'title',
right : 'agendaDay,month'
},
views : {
agendaTwoDay : {
type : 'agenda',
duration : {
days : 2
},
//groupByDateAndResource: true
}
},
//// uncomment this line to hide the all-day slot
allDaySlot : false,
resources : [ {
id : 'a',
title : 'Room A'
}, {
id : 'b',
title : 'Room B',
eventColor : 'green'
}, {
id : 'c',
title : 'Room C',
eventColor : 'orange'
}, {
id : 'd',
title : 'Room D',
eventColor : 'red'
} ],
events: [
{ id: '1', resourceId: 'a', start: '2018-04-06', end: '2018-04-08', title: 'event 1' },
{ id: '2', resourceId: 'a', start: '2018-04-07T09:00:00', end: '2018-04-07T14:00:00', title: 'event 2' },
{ id: '3', resourceId: 'b', start: '2018-04-07T12:00:00', end: '2018-04-08T06:00:00', title: 'event 3' },
{ id: '4', resourceId: 'c', start: '2018-04-07T07:30:00', end: '2018-04-07T09:30:00', title: 'event 4' },
{ id: '5', resourceId: 'd', start: '2018-04-07T10:00:00', end: '2018-04-07T15:00:00', title: 'event 5' }
],
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