I have two different events an event should appear in red calendar another should be blue. My example below.
editable: true,
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay,listWeek'
},
eventSources: [
{
url: 'read_simply.php',
color: 'red',
textColor: 'white'
},
{
url: 'read_recurring.php',
color: 'blue',
textColor: 'white'
}
],
theme: true,
selectable: true,
selectHelper: true,
droppable: true,
Here you can see how the sources are integrated.
Everything works until a little problem. My different events are stored in two different MariaDB tables. Some events have the same "event ID". When I try to move a (red) event to calendar, blue event with the same ID is also moved. How can I correct it???
I believe this is the expected behaviour. fullCalendar assumes that events with the same ID are linked and treats them as such.
I would suggest not to use the "id" property for your database IDs (you can just not provide this property, and fullCalendar will create a unique internal ID for itself on each event), and instead set some custom property e.g. serverID on your event so that you have a way to link it back to your database, but without causing problems within fullCalendar.
Related
I'm using fullcalendar to display a month view which shows the time and title of events (and a popover showing the description when hovered). When I click the event, I show a listday view that shows all the events for that day. That all works fine and I have this working with this code:
var calendar = new FullCalendar.Calendar(calendarEl, {
headerToolbar: {
start: 'dayGridMonth,listDay',
center: 'title',
end: 'prev,next'
},
initialView: 'dayGridMonth',
initialDate: '2023-01-12',
height: 'auto',
dayMaxEvents: 3,
moreLinkClick: 'listDay',
eventClick: function(info){
switchToListView(info)
},
eventColor: 'green',
views: {
listDay: {
displayEventEnd: true
}
},
events: [
{
title: 'All Day Event',
start: '2023-01-01'
},
{
title: 'Meeting',
description: 'My Description',
start: '2023-01-12T10:30:00',
end: '2023-01-12T12:30:00'
},
and in this code pen
I'd like to show the description text for the event in addition to the title in the listday view and I can't figure out how to do this. I don't know whether I need to use an event hook or what. I just can't make my way through the docs and examples to see what to do.
Appreciate any help.
I got this working with this use of eventDidMount.
eventDidMount: function(info) {
info.el.querySelector('.fc-list-event-title a').innerHTML += ` ${info.event.extendedProps.description}`
},
Frankly, it feels a little weird that I need to go into the depths of the rendered HTML to adjust the output instead of changing what is going INTO the generated HTML but I guess that's just how it works (??)
Thanks to #ADyson for the push in the right direction.
I'm using FullCalendar v.3.4.0 with no CSS changes.
I have only the base css and the print version declared.
As you can see on the picture, the last event, that starts near midnight, is getting cut visually.
In Fullcalendar's Github, there is a sticky issue regarding Chrome's rendering of the table, but I'm not sure if the problem lies there.
I haven't tried Firefox, but I'm running this in a webview of a Cordova app on Android, so i'm bound to Chrome.
example of the issue
Init code
$('#events').fullCalendar({
defaultView: 'agendaDay',
allDaySlot: false,
editable: false,
eventLimit: true,
displayEventTime: true,
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay,listMonth'
},
events: "remote.php"
}
Can I add a "ghost" event so it pushes the overflowed view in order to see that event? I would like avoid jquerying my way into the DOM, but if there is no other change I will do so.
Thank you in advance.
Best regards
I have solved with the following steps:
Backend
Added a field called "time" ( or any field you wish to use ) and whenever you detect the end date goes to the next day you set "time" to "23-59".
Frontend
Add the following code to your Fullcalendar init:
eventRender: function(eventObj, $el) {
if (eventObj.time == "23-59") {
$($el).css({"overflow":"inherit","height":"50px"});
}
},
eventAfterAllRender : function (view) {
if (view.type == 'agendaDay') {
$(".fc-agendaDay-view .fc-slats table tbody").append('<tr>\
<td class="fc-axis fc-time fc-widget-content" style="height:100px"></td>\
<td class="fc-widget-content"> </td>\
</tr>');
}
}
This is not an elegant solution for v3 but it suits my requirements.
I'm having problems with the nextDayThreshold option. Even when I´m setting it to "08:00:00", FullCalendar is duplicating events that finish at "07:00:00" on the 1st of a month, displaying it with a left arrow in timelineMonth, showing the same event in two months:
$(function() { // document ready
$('#calendar').fullCalendar({
schedulerLicenseKey: 'CC-Attribution-NonCommercial-NoDerivatives',
nextDayThreshold: '08:00:00',
header: {
left: 'today prev,next',
center: 'title',
right: 'timelineMonth'
},
defaultView: 'timelineMonth',
resourceColumns: [
{
labelText: 'first column',
field: 'title',
width: 150
}
],
resources: [{
id: 'a',
title: 'Auditorium A',
}, {
id: 'b',
title: 'Auditorium B',
eventColor: 'green'
}, {
id: 'c',
title: 'Auditorium C',
eventColor: 'orange'
}],
events: [{
id: '1',
resourceId: 'b',
start: '2018-10-31T21:00:00',
end: '2018-11-01T07:00:00',
title: 'event 1'
}]
});
});
Fiddle
Is this a bug?
Short answer: No, it's not a bug.
Long answer:
The documentation for nextDayThreshold says:
Only affects timed events that appear on whole-days. Whole-day cells
occur in month view, basicDay, basicWeek and the all-day slots in the
agenda views.
In a "timeline" view, even though the slotDuration is set to 1 day by default in a "timelineMonth" view, fullCalendar still regards these as timed slots, rather than whole-day cells. Therefore the nextDayThreshold rules do not apply. e.g. If you changed to a timelineWeek view, it still uses exactly the same layout and slots, except the slots have a different length. They're not a different kind of cell.
If we look at an updated version of your fiddle: https://jsfiddle.net/q2fk57nb/6/ which now includes a regular "month" view (I simply added right: 'timelineMonth,month' to the header) we can see that the same event in that view is confined to the 31st October, because of the nextDayThreshold rule, and the fact that the regular "month" view uses "whole-day" cells.
I put the fullCalendar plug-in on my site. It needs to display events from several google calendars. I did it by analogy from the documentation
(Multiple Google Calendars)
But events are displayed only on the week and month intervals, on the day interval, events are not displayed. They are displayed only if I remove the block (array) resources. But without it, the display of events inside the day becomes horizontal, but it needs to be vertical (shaded time zones of the event). When i manually fill events in events, everything works fine, but I need to take them from Google.
How do I get the events from google on the daily interval displayed in a vertical view?
$('#calendar').fullCalendar({
schedulerLicenseKey: 'CC-Attribution-NonCommercial-NoDerivatives',
scrollTime: '09:00:00',
minTime: '08:00:00',
googleCalendarApiKey: '<MY API KEY>',
defaultView: 'agendaDay',
header: {
left: 'prev,next today',
center: 'title',
right: 'agendaDay,agendaWeek,month'
},
eventSources: [
{
id: 'k01',
resourceId: 'k01',
googleCalendarId: 'hhug0bdep49rjgq4kk79rrjbgg#group.calendar.google.com', // 1 calendar
color: 'blue',
},
{
id: 'k02',
resourceId: 'k02',
googleCalendarId: 'db1ls6vg0fh9sgqt57fkethens#group.calendar.google.com' //2 calendar
},
{
id: 'k03',
resourceId: 'k03',
googleCalendarId: 'ncvl95m9f8irl6nd3ejm99fvho#group.calendar.google.com' //3 calendar
}
],
resources: [
{ id: 'k01', title: 'calendar 1', eventColor: 'red'},
{ id: 'k02', title: 'calendar 2',},
{ id: 'k03', title: 'calendar 3'}
]
});
Your events coming from Google will not have resource IDs. If there is no resource ID, it is impossible for fullCalendar to know which column to display it in, so it cannot display it at all.
To stop the agendaDay view from displaying with resources, you need to set the option groupByDateAndResource to false:
groupByDateAndResource: false
Although the documentation says this is false by default, it appears you do have to explicitly set this option in your calendar config for it to work.
See http://jsfiddle.net/toytd26b/63/ for a working example (you can fill in your API key to see actual event data, but it shows the layout correctly).
Arshaw FullCalendar displays the current date in agendaDay view even if I set all headers off. I would like the entire th of that table to disappear. How do I do that in agendaDay view?
$('#calendar').fullCalendar({
defaultView: 'agendaDay',
header: {
left: 'false',
center: 'false',
right: 'false'
},
});
Fiddle
Set header itself to false:
$('#calendar').fullCalendar({
defaultView: 'agendaDay',
header: false
});
Since there is no option to remove the text and, even if you set all header options to an empty string, it still displays the day, you can use viewRender to hide the text.
So, after the calendar has been render, we will find the fc-day-header th and set html to an empty string. See a working JSFiddle. This code works for Fullcalendar 2.*.
$('#calendar').fullCalendar({
defaultView: 'agendaDay',
header: {
left: '',
center: '',
right: ''
},
viewRender: function(view, element) {
element.find('.fc-day-header').html('');
}
});
This will keep the th, but will have an height of 0. If you want to remove the entire thead, you could use element.find('.fc-day-header').parents('table:first').parents('thead').remove()
If you want to use Fullcalendar 1.6.3/1.6.4 the classnames are a bit different, and you should use
element.find(".fc-col0.fc-widget-header").html('');
Check the working fiddle using 1.6.4:
Before 1.6.3
You are using FullCalendar 1.5.3 in your fiddle. This is a really old release and I advice you to update it. I haven't looked for a solution because you didn't specify that requirement. However the one provided won't work, since eventRender was introduced in Fullcalendar 1.6.3.