I'm using FullCalendar in a Bootstrap-based website in which I have two columns, the left one uses 9 bootstrap columns and the aside uses 3, and the calendar is in the aside.
The problem is events appear cropped due to the lack of space.
What I want to do is that, instead of the event being cropped, the day height will grow to accomodate the content.
My code is as follows:
$(document).ready(function() {
$("#calendar").fullCalendar({
locale: 'es',
events: [
{
title: 'Prueba 1',
start: '2017-05-04'
},
{
title: 'Prueba 2',
start: '2017-05-23'
},
{
title: 'Prueba tiempo',
start: '2017-05-24T12:30:00',
allDay: false
}
],
eventClick: function(calEvent, jsEvent, view) {
alert(calEvent.title + " : " + moment(calEvent.start).format("DD/MM hh:mm"));
}
});
});
How can I accomplish that?
Thank you.
Related
I am using FullCalendar 4 and i have setup the Calendar Object in my script
function createBookingCalendar() {
var calendarEl = document.getElementById('bookingCalendar');
let calendar = new FullCalendar.Calendar(calendarEl, {
locale: 'en-gb', // the initial locale
timeZone: 'Europe/London',
plugins: ['interaction', 'list', 'timeGrid'],
header: {
left: 'prev,next today',
center: 'title',
right: 'listDay,listWeek,timeGridDay,timeGridWeek, dayGridWeek,DayGridMonth'
},
businessHours: [ // specify an array instead
{
daysOfWeek: [1, 2, 3, 4, 5], // Monday - Friday
startTime: '09:00', // 9am
endTime: '18:00' // 6pm
}, {
daysOfWeek: [6], // Saturday
startTime: '10:00', // 10am
endTime: '16:00' // 4pm
}
],
hiddenDays: [7],
// customize the button names,
// otherwise they'd all just say "list"
views: {
listDay: {
buttonText: 'Goto Day View'
},
listWeek: {
buttonText: 'Goto Week View'
},
timeGridDay: {
buttonText: 'Goto Time Grid Day View'
},
timeGridWeek: {
buttonText: 'Goto Time Grid Week View'
}
},
slotDuration: '02:00', // 2 hours
defaultView: 'listWeek',
defaultDate: Date.now(),
navLinks: true, // can click day/week names to navigate views
editable: false,
eventLimit: true, // allow "more" link when too many events
eventSources: [
// CAD Solutions Event Source (Remote Database)
{
url: '../php/getBookings.php',
method: 'GET',
failure: function () {
$.confirm({
theme: 'Modern',
icon: 'fas fa-exclamation-triangle',
title: 'Error',
content: '<p>There was an error fetching the bookings from our database, we appologise for the inconvenience.</p><p class="text-muted">This error has been logged with our engineers.</p><small>Error 0x86451 (Fetch Bookings Database Error)</small>',
type: 'red',
columnClass: 'col-md-6 col-md-offset-3',
buttons: {
close: {
text: 'Close.',
action: function () {
//reset flag and recall the function.
}
}
}
});
}
}
],
eventRender: function (info) {
var tooltip = new Tooltip(info.el, {
title: info.event.title,
content: 'asdadasdqweqweqweqweqwasssd',
placement: 'top',
trigger: 'hover',
container: 'body'
});
},
noEventsMessage: '<div class="panel panel-primary" style="height: 245px;width: 654px;margin:0 auto;padding:10px;margin-top:30px;"><div class="panel-heading"><h4><i class="fas fa-info-circle"></i> There are no bookings for this day.</h4></div><div class="panel-body"><p>There are no bookings saved for this date, you can add a booking to this day using the buttons below, or select a different date.</p><p class="text-muted">You can create a booking for this date as all timeslots are available.</small></div><div class="panel-footer"><a class="btn btn-primary" href="javascript:void(0);" id="addBooking" style="color:#fff;"><i class="fas fa-calendar-plus"></i> Create Booking For This Date.</a></div></div><div class="divider"> </div><div class="divider"> </div><div class="divider"> </div>',
eventClick: function (info) {
//Prevent Default Behaviour.
info.jsEvent.preventDefault();
$.confirm({
theme: 'Modern',
icon: 'fas fa-info-circle',
title: 'Selected Booking Information',
content: '<ul class="list-group list-group-flush" id="assetContent"><li class="list-group-item">Booking Company Name: ' + info.event.extendedProps.companyName + '</li><li class="list-group-item">Booking Date: ' + info.event.start + '</li><li class="list-group-item">Booking Slot: ' + info.event.startTime + ' - ' + info.event.endTime + '</li></ul>',
type: 'blue',
columnClass: 'col-md-6 col-md-offset-3',
buttons: {
close: {
text: 'Close.',
action: function () {
//reset flag and recall the function.
}
}
}
});
}
});
calendar.render();
}
When i have eventRender setup in the code the calendar stops fetching events from my source and it shows the eventSources>failure dialog that i added in the function.
When i remove the eventRender part of the script the calendar object renders perfectly and I am able to see all the events from my database.
Could anybody point out where I am going wrong with the coding?
would really like to get the eventRender part working so i can change the background color of events that are set, also in addition, how would i add in events of my own after the source has fetched the events from the server? I want to do this so I can fill in time slots that are missing in the calendar so the user can select a free slot to create a booking.
Many Thanks
Edit I took out the tool tip code I found in the full calendar docs and replaced it with ui tool tip instead, that is now working. What is the procedure for adding in my own events?
I am using fullcalendar and my goal is to have a simple pop up on the event click but for some reason I cannot get it to pull in the description in the alert.
Am I missing some JS to include or something? I tried to use the examples from their site but it was not working. I am sure it is something stupid I am missing.
<script src='../assets/calendar/packages/core/main.js'></script>
<script src='../assets/calendar/packages/interaction/main.js'></script>
<script src='../assets/calendar/packages/daygrid/main.js'></script>
<script src='../assets/calendar/packages/timegrid/main.js'></script>
<script src='../assets/calendar/packages/list/main.js'></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
var d = new Date();
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
plugins: [ 'interaction', 'dayGrid', 'timeGrid', 'list' ],
height: 'parent',
header: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
},
defaultView: 'dayGridMonth',
defaultDate: d,
eventClick: function(info) {
alert('Event: ' + info.description);
},
navLinks: true, // can click day/week names to navigate views
editable: false,
eventLimit: true, // allow "more" link when too many events
events:
[
{
title: 'All Day Event<br>second line',
description: 'description for Long Event',
start: '2020-05-01'
},
{
title: 'Session',
start: '2020-05-12T10:30:00',
description: 'description for Long Event',
end: '2020-05-12T12:30:00'
},
{
title: 'Practical',
start: '2020-05-27T10:30:00',
description: 'description for Long Event',
end: '2020-05-27T12:30:00'
}
]
});
calendar.render();
});
</script>
You need to write
alert('Event: ' + info.event.extendedProps.description);
because
1) the info object isn't the event, the event is a sub-property of that info object - this is described at https://fullcalendar.io/docs/eventClick
and
2) description is a non-standard field as far as fullCalendar is concerned, and all non-standard fields are placed inside the extendedProps sub-property of the event object which fullCalendar generates based on the data you provide it - this is described at https://fullcalendar.io/docs/event-parsing
I am currently working on Fullcalendar v4 with rrule plugin
I have this code
var calendarEl = document.getElementById('calendardemo');
var calendar = new FullCalendar.Calendar(calendarEl, {
plugins: ['interaction', 'dayGrid', 'timeGrid', 'momentTimezone', 'rrule', 'list'],
header: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay'
},
editable: true,
events: [
{ // standard property
title: 'This is sample event',
start: '2019-12-29',
end: '2019-12-31'
},
{
title: 'event with rrule plugin',
rrule: {
freq: 'weekly',
interval: 5,
byweekday: [ 'mo', 'fr' ],
dtstart: '2019-12-29T10:30:00',
until: '2020-12-31'
}
}
]
});
calendar.render();
please note:
{ // this is the standard (No issues)
title: 'This is sample event',
start: '2019-12-29',
end: '2019-12-31'
}
{ // Not updating on change view
title: 'event with rrule plugin',
rrule: {
freq: 'weekly',
interval: 5,
byweekday: [ 'mo', 'fr' ],
dtstart: '2019-12-29T10:30:00',
until: '2020-12-31'
}
}
Link to a demo
Now when I drag & drop "This is sample event" then change view grid or click < > it stays updated. but when I drag & drop "event with rrule plugin" then change view grid or click < > it's not updated. it just stays where it was loaded in first load. Please help. Thanks !
You might have to add a form that would allow a user to change repeated rules when they begin to drag them. Otherwise, could you describe expected behaviour after the user drops repeated event on another date. What changes would be applied to a rule?
I have created a scheduler with following events and resources
var sampleEvents = [{ 'id': '1',
'resourceid': '27',
'start': '2018-09-19T07:00:00',
'stop': '2018-09-19T16:00:00',
'title': 'Message 1',
}];
var sampleResources = [{
facility_type: "Message Type",
id: '27',
title: "Message 1"
}];
$('#calendar').fullCalendar({
schedulerLicenseKey: 'CC-Attribution-NonCommercial-NoDerivatives',
now: currenDate //Today's Date,
editable: false,
header: {
left: 'today prev,next',
center: 'title',
right: 'month,timelineDay,agendaWeek'
},
defaultView: 'month',
resourceGroupField: 'facility_type',
resourceColumns: [
{
labelText: 'Facility',
field: 'title',
width: 150,
},
],
resources: sampleEvents,
events: sampleResources,
dayClick: function(date, jsEvent, view) {
if(view.name == 'month' || view.name == 'basicWeek') {
$('#calendar').fullCalendar('changeView', 'timelineDay');
$('#calendar').fullCalendar('gotoDate', date);
}
},
});
}, function (error) {
});
The events are showing in month view, but they are not shown in day view. Can someone tell me where the problem is?
In JavaScript, variable and property names are case-sensitive. Therefore
'resourceid': '27'`
should be
'resourceId': '27'
as per the example in the documentation. The event isn't showing the timeline view because as far as fullCalendar is concerned you didn't tell it which resource to associate it with.
Assigned objects are improper. If you pass the correct objects. It will work fine
resources: sampleResources,
events: sampleEvents
You can refer below working jsfiddle link
http://jsfiddle.net/jso51pm6/3769/
resources: sampleEvents,
events: sampleResources,
You filled them wrong. Switch them. It will work.
resources: sampleResources,
events: sampleEvents,
I am working on a web app using the FullCalendar JQuery plugin to display the absence/presence of workers each day in a company.
I need to display several types (or fields) of information in each day. For example, I would like to display for each day: a Title (ex. "John is absent"), and Percentage(ex, "95% assistance"). And I would like this percentage to appear with a different format, on the bottom right corner of each day's box.
As far as I've seen, the possible fields to describe an event are basically these ones:
events: [
{
title: 'John is sick',
start: '2013-11-19',
allDay: true
},
{
title: 'Mike is on vacation',
start: '2013-11-21',
end: '2013-11-26',
allDay: true
}
]
Is there any way to add more fields (like the porcentage of assistance) to a FullCalendar day?
Edit: thanks to Henrique C's answer I managed to do it. Just to complete a little more the answer I would like to add that besides, doing what Henrique said in his answer, it is also necessary to do something like this:
$('#calendar').fullCalendar({
events: [
{
title: 'My Event',
start: '2010-01-01',
description: 'This is a cool event'
}
// more events here
],
eventRender: function(event, element) {
element.qtip({
content: event.description
});
}
});
Non-standard Fields This was taken from Fullcalendar website.
In addition to the fields above, you may also include your own non-standard fields in each Event Object. FullCalendar will not modify or delete these fields. For example, developers often include a description field for use in callbacks such as eventRender.
You can add any fields you want, fullcalendar will not change them.
events: [
{
title: 'John is sick',
start: '2013-11-19',
allDay: true,
description: 'Hurrayyyyyyyyyy',
myotherspecialfield: ':P'
},
{
title: 'Mike is on vacation',
start: '2013-11-21',
end: '2013-11-26',
allDay: true,
description: 'Hurrayyyyyyyyyy'
myotherspecialfield: ':P'
}
]