How do I indicate an event as being a background event within a JSON feed (which I'm creating through AJAX). It is being rendered as a regular event, not a Background event.
JSON Feed:
[{"id":"availableForMeeting","start":"2015-02-04T09:00:00","end":"2015-02-04T20:00:00","rendering":"background","overlap":true},{"title":"Working","start":"2015-02-04T10:00:00","end":"2015-02-04T12:00:00","allDay":false,"overlap":true},{"title":"Lunch","start":"2015-02-04T12:00:00","end":"2015-02-04T14:00:00","allDay":false},{"title":"Working","start":"2015-02-04T14:00:00","end":"2015-02-04T19:00:00","allDay":false}]
You can do this in FullCalendar 2.2+ using Background Events by adding rendering: 'background' to the event (documentation). In the example below, it'd be the same for the JSON feed.
Since you stated you are indeed using rendering: 'background', I would check that
1) You are using the correct version of FullCalendar
2) There are no errors on the page
3) If neither 1 or 2, post a code snippet that shows your problem, since the one below works fine:
Also note that per the docs:
Background events that are timed will only be rendered on the time
slots in agenda view. Background events that are all-day will only be
rendered in month view or the all-day slots of agenda view.
$('#fullCal').fullCalendar({
events: [{
title: 'Main Event',
start: moment().add(3, 'h'),
end: moment().add(5, 'h'),
color:'#ff0000',
allDay: false
}, {
start: moment().add(1, 'h'),
end: moment().add(10, 'h'),
rendering: 'background'
}, {
title: 'Other Event',
start: moment().add(6, 'h'),
end: moment().add(8, 'h'),
color:'#00cc00',
allDay: false
}],
header: {
left: '',
center: 'prev title next',
right: ''
},
timezone:'local',
defaultView: 'agendaWeek'
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.3/moment.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.2.0/fullcalendar.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.2.0/fullcalendar.min.js"></script>
<div id="fullCal"></div>
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 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).
I tried to apply fullcalendar to my page.
When I pasted the example code to my page, there's no header buttons and no same event styles, these events can't be drag and drop.
Using: jquery 3.3.0, moment 2.20.1, fullcalendar 3.8.0.
Do I lost some settings? Please help and figure out, thank you all.
$(function() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek,basicDay'
},
defaultDate: '2018-01-12',
navLinks: true, // can click day/week names to navigate views
editable: true,
eventLimit: true, // allow "more" link when too many events
events: [
{
title: 'All Day Event',
start: '2018-01-01'
},
{
id: 999,
title: 'Repeating Event',
start: '2018-01-09T16:00:00'
},
{
id: 999,
title: 'Repeating Event',
start: '2018-01-16T16:00:00'
},
{
title: 'Conference',
start: '2018-01-11',
end: '2018-01-13'
},
{
title: 'Meeting',
start: '2018-01-12T10:30:00',
end: '2018-01-12T12:30:00'
},
{
title: 'Lunch',
start: '2018-01-12T12:00:00'
},
{
title: 'Meeting',
start: '2018-01-12T14:30:00'
},
{
title: 'Dinner',
start: '2018-01-12T20:00:00'
},
{
title: 'Click for Google',
url: 'http://google.com/',
start: '2018-01-28'
}
]
});
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.8.0/fullcalendar.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.8.0/fullcalendar.print.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.8.0/fullcalendar.min.js"></script>
<div id="calendar">
</div>
I don't know precisely which example code you tried to copy, but unfortunately you didn't copy it exactly right.
This is your problem:
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.8.0/fullcalendar.print.min.css" rel="stylesheet" />
This overrides the default CSS (from fullcalendar.min.css) with the version intended for use when printing the page. Changes here include hiding the headers and buttons and reducing the use of colours.
What you need to do is tell the browser to only use this stylesheet when in print mode. This is done using a media query media="print", as follows:
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.8.0/fullcalendar.print.min.css" rel="stylesheet" media="print"/>
thanks in advance.
I'm struggling with custimizing fullcalendar scheduler stuff.
I just want to display weektimetable like below.
(FYI, below's CSS is just edited by me, of course it's not the answer I want.)
As you see, in the case of the original fullcalendar scheduler's weekshot, you can't have the same y-point by one event, and I want to customize this.
please your advice, thanks
enter image description here
enter image description here
Without seeing the exact event data you're using to create this scenario, it's hard to be sure exactly what the issue is. But here's my suggestion:
I think you are wanting to get two events side by side, but as long as their times overlap, you never can. Even if the times don't overlap, if the end of event 1 and the start of event 2 fall somewhere in the middle of a slot, they will still appear to overlap.
Let's illustrate the point using the snippet below:
There are two calendars in the demo (scroll down to see the second one). Both calendars have identical resources and events.
The first resource contains events which overlap onto the same day.
So they will never be shown side-by-side.
The second resource contains events which don't overlap. One ends
just before midday, and the second starts at midday on the same day.
On the first calendar they are still shown as overlapping, because the calendar only shows things in 1-day intervals. Within that whole day context, the events still overlap. There is only 1 slot for that day into which they can be placed.
However on the second calendar, the events in the second resource will be shown side-by-side, because the slot duration (12 hours) is now short enough to allow
the events to be placed into separate slots based on their start/end times.
$(function() { // document ready
$('#calendar1').fullCalendar({
schedulerLicenseKey: 'GPL-My-Project-Is-Open-Source',
defaultView: 'timeline',
header: {
left: 'prev,next today',
center: 'title',
right: 'timeline'
},
slotDuration: {
days: 1
},
resources: [{
"id": 1,
"title": "Screenshot 1"
},
{
"id": 2,
"title": "Screenshot 2"
},
],
events: [{
id: '1',
resourceId: "1",
start: '2017-06-01',
end: '2017-06-04',
title: 'event 1'
},
{
id: '2',
resourceId: "1",
start: '2017-06-03',
end: '2017-06-06',
title: 'event 2'
},
{
id: '3',
resourceId: "2",
start: '2017-06-01',
end: '2017-06-03T12:00',
title: 'event 3'
},
{
id: '4',
resourceId: "2",
start: '2017-06-03T12:00',
end: '2017-06-06',
title: 'event 4'
}
]
});
$('#calendar2').fullCalendar({
schedulerLicenseKey: 'GPL-My-Project-Is-Open-Source',
defaultView: 'timeline',
header: {
left: 'prev,next today',
center: 'title',
right: 'timeline'
},
slotDuration: {
hours: 12
},
resources: [{
"id": 1,
"title": "Screenshot 1"
},
{
"id": 2,
"title": "Screenshot 2"
},
],
events: [{
id: '1',
resourceId: "1",
start: '2017-06-01',
end: '2017-06-04',
title: 'event 1'
},
{
id: '2',
resourceId: "1",
start: '2017-06-03',
end: '2017-06-06',
title: 'event 2'
},
{
id: '3',
resourceId: "2",
start: '2017-06-01',
end: '2017-06-03T12:00',
title: 'event 3'
},
{
id: '4',
resourceId: "2",
start: '2017-06-03T12:00',
end: '2017-06-06',
title: 'event 4'
}
]
});
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.min.css" rel="stylesheet" media="all" />
<link href='https://fullcalendar.io/js/fullcalendar-scheduler-1.6.2/scheduler.min.css' rel='stylesheet' />
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.0/moment.min.js'></script>
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js" integrity="sha256-eGE6blurk5sHj+rmkfsGYeKyZx3M4bG+ZlFyA7Kns7E=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.min.js"></script>
<script src='https://fullcalendar.io/js/fullcalendar-scheduler-1.6.2/scheduler.min.js'></script>
<div id='calendar1'></div>
<br/><br/>
<div id='calendar2'></div>
So, in conclusion, to get the effect you want, you must ensure that
Your events do not overlap either by date or time, and
The configured slot duration is sufficiently small to allow the
calendar to place the events side-by-side in separate slots.