Hi guys i want to separate a month into 4-5 weeks so that each week will have 7 days.I cannot find a way to display the whole month in this view only the current week as you can see each week column contains the actual week days, but i would like to render the whole month with this scheme.
this.calendarOptions = {
headerToolbar: {
left: '',
center: 'title',
right: 'prev next'
},
defaultAllDay:false,
aspectRatio: 2.45,
editable: false,
slotMinWidth: 75,
selectable: false,
eventClassNames: ['mt-1'],
eventResourceEditable: false,
eventOverlap: false,
initialView: 'resourceTimeGridSevenDay',
resourceLabelClassNames: ['p-0'],
resourceGroupLabelContent: (arg) => {
return {html: `<strong>${arg.groupValue}</strong> `};
},
resourceLabelContent : (arg) => {
return {html: `<span> ${arg.resource._resource.title}</span> `};
},
slotLabelContent: (arg) => {
return {html: ` `};
},
eventClick: (arg) => {
console.log('event click')
},
now: new Date().toISOString(),
resourceAreaHeaderContent: 'Sponsor/Protocol',
resourceAreaWidth: '10%',
views: {
resourceTimeGridSevenDay: {
type: 'resourceTimeGrid',
duration: {days: 7},
slotDuration: { weeks: 4 },
}
},
events: 'https://fullcalendar.io/demo-events.json?with-resources=2',
fixedWeekCount: false,
rerenderDelay: 2,
progressiveEventRendering: true,
showNonCurrentDates: false,
initialDate: new Date().toISOString(),
}
}
I'm not sure you can create exactly what you've shown in your screenshot using fullCalendar, but it's possible to get fairly close, and it might be good enough.
In the documentation for the slotLabelFormat setting, it mentions that for the timeline view it can be configured with multiple rows in the label area.
So you could still use the "month" view to get the correct number of days, but set up the slot labelling like this:
views: {
resourceTimelineMonth: {
slotLabelFormat: [
{ week: 'long', }, // top level of text
{ weekday: 'short', day: '2-digit' } // lower level of text
],
}
},
It shows the week number as the week of the year rather than week of the month, and the date format is similar but not identical (and will vary a bit depending on your locale anyway).
Live demo: https://codepen.io/ADyson82/pen/BawNMEp
If you want even more control of the exact date format, you'd need to use one of the plugins as mentioned in the Date Formatting documentation.
Documentation:
slotLabelFormat
Date Formatting
Related
I have used the Frudens Calendar as a template here which uses fullcalendar. I have heavily modified the original file which works really well.
I have since tried to merge with an existing solution, so followed all the guidance about which order to do everything in. It all functions correctly except when the calendar is rendered it now loses the interactivity. It is for the resource timeline, the resources show correctly and show the events correctly but the navigations buttons at the top for day, month next previous etc now don't do anything. I can move an event, which updates the table but doesn't update the calendar interface until I leave the layout and go back to it. I have a refresh button on the calendar but like the other nav buttons it doesn't work.
This is the fullcalendar html:
<!DOCTYPE html>
<html>
<head>
<title>calendar</title>
<meta charset="utf-8" />
<link
href="https://use.fontawesome.com/releases/v5.0.6/css/all.css"
rel="stylesheet"
/>
<link href="https://cdn.jsdelivr.net/npm/fullcalendar-scheduler#5.3.2/main.min.css" rel="stylesheet"/>
<linkhref="/main.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/fullcalendar#5.3.2/main.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/fullcalendar-scheduler#5.3.2/main.min.js"></script>
<script>
var calendar;
document.addEventListener("DOMContentLoaded", function () {
var calendarEl = document.getElementById("calendar");
//plugins: ['interactionPlugin', 'timeGrid', 'dayGrid', 'resourceTimeline'],
calendar = new FullCalendar.Calendar(calendarEl, {
// --------------------
// FullCalendar Scheduler License
// https://fullcalendar.io/license/premium
// --------------------
schedulerLicenseKey: "CC-Attribution-NonCommercial-NoDerivatives",
// --------------------
// Overall Display
// --------------------
// plugins:[interactionPlugin],
headerToolbar: {
left: "refresh prev,next",
center: "title",
right:
"resourceTimelineDay,resourceTimelineWeek,resourceTimelineMonth,resourceTimelineYear resourceTimeline160Day resourceTimeGridDay",
},
customButtons: {
refresh: {
text: "Refresh",
click: function () {
FileMaker.PerformScript("T01_render_calendar", "");
},
},
},
height: window.innerHeight - 20,
aspectRatio: 1.8,
expandRows: false,
handleWindowResize: true,
windowResizeDelay: 100,
windowResize: function (arg) {
calendar.setOption("height", window.innerHeight - 20);
},
// --------------------
// Views
// --------------------
views: {
resourceTimelineDay: {
buttonText: "D",
slotDuration: "00:30:00",
slotMinTime: "00:00",
slotMaxTime: "24:00",
// titleFormat: { day:'2-digit, month: 'short'},
slotLabelFormat: [
{ weekday: 'long' },
{hour: 'numeric', minute: '2-digit', omitZeroMinute: true, meridiem: 'short'},
// // { hour: "2-digit", minute:"", meridiem },
// { hour: "2-digit", minute: "2-digit" },
],
},
resourceTimelineWeek: {
buttonText: "W",
slotDuration: "03:00",
slotMinTime: "00:00",
slotMaxTime: "24:00",
duration: { days: 7 },
// titleFormat: { day:'2-digit, month: 'short'},
weekText:"W",
slotLabelFormat: [
{ week: 'short'}, // top level of text
{ weekday: 'short', day:'2-digit' },
{hour: 'numeric', minute: '2-digit', omitZeroMinute: true, meridiem: 'short'},
// // { hour: "2-digit", minute:"", meridiem },
// { hour: "2-digit", minute: "2-digit" },
],
},
resourceTimelineMonth: {
buttonText: "M",
},
resourceTimelineYear: {
buttonText: "Y",
},
resourceTimeline160Day: {
buttonText: "D(160)",
slotDuration: "06:00",
slotMinTime: "00:00",
slotMaxTime: "24:00",
type: "resourceTimeline",
duration: { days: 160 },
},
resourceTimeGridDay: {
buttonText: "D",
slotDuration: "00:30:00",
slotMinTime: "00:00",
slotMaxTime: "24:00",
},
},
initialView: "resourceTimelineDay",
// --------------------
// Date & Time
// --------------------
slotMinTime: "00:00",
slotMaxTime: "24:00",
// scrollTime: "09:00",
firstDay: 1,
nowIndicator: true,
// --- Date Nav Links ---
navLinks: false, // can click day/week names to navigate views
// navLinkDayClick: function (date, jsEvent) {
// alert(date);
// calendar.changeView("resourceTimelineDay", date);
// FileMaker.PerformScript("datePicker_select", dateConvert(date));
// },
// navLinkWeekClick: function (weekStart, jsEvent) {
// calendar.changeView("resourceTimelineWeek", weekStart);
// FileMaker.PerformScript(
// "datePicker_select",
// dateConvert(weekStart)
// );
// },
// --- Week Numbers ---
weekNumbers: true,
// --- Date Clicking & Selecting ---
selectable: true,
selectMirror: true,
// dateClick: function (arg) {
// alert("click");
// alert(arg.dateStr);
// },
select: function (arg) {
const argJson = JSON.stringify(arg);
FileMaker.PerformScript("fullCalendar_select", argJson);
calendar.unselect();
},
// --------------------
// Events
// --------------------
// --- Event Clicking & Hovering ---
editable: true,
eventClick: function (arg) {
const argJson = JSON.stringify(arg);
FileMaker.PerformScript("fullCalendar_eventClick", argJson);
},
// --- Event Dragging & Resizing ---
eventResourceEditable: true,
eventDrop: function (arg) {
const argJson = JSON.stringify(arg);
FileMaker.PerformScript("fullCalendar_eventDrop", argJson);
},
eventResize: function (arg) {
const argJson = JSON.stringify(arg);
FileMaker.PerformScript("fullCalendar_eventResize", argJson);
},
// --- Event Popover ---
dayMaxEvents: true, // allow "more" link when too many events
// --------------------
// Resources
// --------------------
resourceOrder: "title",
resourceAreaWidth: "15%",
// --------------------
// International
// --------------------
locale: "en",
timeZone: "Europe/London",
});
calendar.render();
});
function setResourcesEventSources(fmParams) {
const obj = JSON.parse(fmParams);
if (obj.option) {
for (let key in obj.option) {
calendar.setOption(key, obj.option[key]);
}
}
calendar.setOption("resources", obj.resources);
calendar.setOption("eventSources", obj.eventSources);
calendar.gotoDate(obj.gotoDate);
}
function dateConvert(date) {
const y = date.getFullYear();
const m = date.getMonth() + 1;
const d = date.getDate();
return y + "-" + m + "-" + d;
}
</script>
<style>
html,
body {
overflow: hidden; /* don't do scrollbars */
font-family: Avenir, Arial, Helvetica Neue, Helvetica, sans-serif;
font-size: 14px;
margin: 0;
padding: 0;
},
</style>
</head>
<body>
<div id="calendar"></div>
</body>
</html>
†
I think the issue is somewhere here in the render calendar script:
Script snippet
Any help would be much appreciated.
It's weird you say that the interface doesn't update after you move an event from one area to another. Isn't that the update?
Full Calendar allows for the drag drop, which is the update. The eventDrop method does updating of the underlying record, but the event should move.
I'm also interested in why your prev / nav buttons don't work. I see nothing that prevents that.
Maybe this is the culprit:
calendar.setOption("resources", obj.resources);
calendar.setOption("eventSources", obj.eventSources);
According to the FC documentation of setOption, setting resources and eventSources is not available in this manner. It has to be done another way.
Here you have to use the addEventSource or refretchEvents methods. And those are a bit tricky when using FileMaker as the data source. They can be done, and the Claris Full Calendar Add-on employs a method. But it's a bit roundabout.
I can provide more detail if you wish.
One more thing: in your FM Script, why the Go to Field[] step at the end? I never use that when I'm working with web viewer stuff.
J Brown, thank you so much for your help with this.
For anyone else, the issue was with converting the date format to ISO from FM.
Not sure why it worked in the original file, maybe because of where it was originally written was not in the UK. We changed a custom function that simply converted the format of the system date.
This was a useful resource: https://community.jsinfm.com/home
When I set the FullCalendar to:
initialView: 'dayGridWeek',
The Events are shown with coloured dots instead of solid fill (this is what I want). However, when I set the FullCalendar to:
initialView: 'timeGridWeek',
the Events appear as solid fill. How can I correct this please (i.e., show a coloured dot to the left of each Event)?
My code is:
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
firstDay: 0, //Sunday
weekends: true, //Show the weekends
businessHours: { // days of week. an array of zero-based day of week integers (0=Sunday)
daysOfWeek: [ 1, 2, 3, 4, 5 ], // Monday - Friday
startTime: '09:00', // a start time
endTime: '17:00', // an end time
},
initialView: 'timeGridWeek',
headerToolbar: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth'
},
locale: 'en-gb',
selectable: true, // gives ability to select multiple days and then have a callback event when this occurs
buttonIcons: false, // show the prev/next text
weekNumbers: true, // show week numbers
navLinks: true, // can click day/week names to navigate views
editable: true, // can make changes and add changes
dayMaxEvents: true, // allow "more" link when too many events
displayEventTime: false, // display the start time
displayEventEnd: false, // display the end time
eventTimeFormat: {
hour: '2-digit',
minute: '2-digit',
},// display time with minutes
eventDisplay: 'auto', //Controls which preset rendering style events use. 'block' - changes an event with start and end times from a list-item to a block
eventConstraint: {
start: moment().format('YYYY-MM-DD'),/* This constrains it to today or later */
end: '2100-01-01', // hard coded goodness unfortunately
},
events: responseJson1a,//Populate Sessions/Events using JSON
I have added the following from Kibé M.C:
eventDidMount: function (info) {
//you need to get the color from "info" argument and place it on the CSS style let eventColor = info."YourEventColor"
if (info.event) {
info.el.insertAdjacentHTML("afterBegin", '<p class="largeDot" style="color:${info.borderColor}">•</p>');
}
},
I also tried:
style="color:${info.event.borderColor}"
However the dot is not picking up the 'red' from borderColor and the text drops out of the border:
Also, the 'month' and 'list' views have two dots:
You can use eventDidMount
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
...
eventDidMount: function (args: any) {
if (eventsExist) {
args.el.insertAdjacentHTML("afterBegin", "•");
}
},
UPDATE
You should only see one dot.
Send a screenshot of the two dots so I try debugging the issue
You can add CSS to define a fixed size
To have dynamic colors on the dot, you can simply do this:
eventDidMount: function (info)
//you need to get the color from "info" argument and place it on the CSS style
let eventColor = info."YourEventColor"
{ if (info.event) { info.el.insertAdjacentHTML("afterBegin", `<p style="color:${eventColor}">•</p>`);
} },
With the help of Kibe I got:
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
firstDay: 0, //Sunday
weekends: true, //Show the weekends
hiddenDays: calendarHidenDays, //non working days to hide
businessHours: { // days of week. an array of zero-based day of week integers (0=Sunday)
daysOfWeek: [ 1, 2, 3, 4, 5 ], // Monday - Friday
startTime: '09:00', // a start time
endTime: '17:00', // an end time
},
initialView: 'timeGridWeek',
headerToolbar: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth'
},
locale: 'en-gb',
selectable: true, // gives ability to select multiple days and then have a callback event when this occurs
buttonIcons: false, // show the prev/next text
weekNumbers: true, // show week numbers
navLinks: true, // can click day/week names to navigate views
editable: true, // can make changes and add changes
dayMaxEvents: true, // allow "more" link when too many events
displayEventTime: false, // display the start time
displayEventEnd: false, // display the end time
eventTimeFormat: {
hour: '2-digit',
minute: '2-digit',
},// display time with minutes
eventDisplay: 'auto', //Controls which preset rendering style events use. 'block' - changes an event with start and end times from a list-item to a block
eventConstraint: {
start: moment().format('YYYY-MM-DD'),/* This constrains it to today or later */
end: '2100-01-01', // hard coded goodness unfortunately
},
events: responseJson1a,//Populate Sessions/Events using JSON
eventDidMount: function(info) {
console.log(info.event.borderColor);
var icon = info.event.extendedProps.icon;
if (info.event.extendedProps.icon) {
if (calendar.view.type == "dayGridMonth") {
$(info.el).find('.fc-event-title').append("<i class='fa "+icon+"'></i>");
}else {
$(info.el).find('.fc-event-title').prepend("<i class='largeDot' style='color:"+info.event.borderColor+"'>•</i>").append("<i class='fa "+icon+"'></i>");
}
}else{
//
if (calendar.view.type != "dayGridMonth") {
$(info.el).find('.fc-event-title').prepend("<i class='largeDot' style='color:"+info.event.borderColor+"'>•</i>");
}
};
},
});
The variables passed back from the serverside are:
id, title, daysOfWeek, startRecur, endRecur, startTime, endTime, backgroundColor, classNames, extendedProps1, icon, setAllDay, borderColor, textColor
I use fullcalendar-Angular (angular 11 , fullcalendar 5.5.0).
But I cannot retrieve events to show on the calendar.
I retrieve events in the picture below:
https://i.stack.imgur.com/UdAGJ.png
This is the fetch code.
this.Studio.getStudioCalendar().subscribe(data => {
data["data"].map((list) => {
this.eventDateSet.push(list);
});
this.calendarOptions;
console.log("calendar data :",this.eventDateSet)
console.log("calendarOptions :",this.calendarOptions)
})
}
This is the libar FullCalendar’s code.
dateClick: this.handleDateClick.bind(this),
headerToolbar: {
left: "prev,next today",
center: "title",
right: "dayGridMonth,timeGridWeek,timeGridDay,listWeek,prevYear,nextYear",
},
initialView: "dayGridMonth",
weekends: true,
editable: true,
selectable: true,
selectMirror: true,
dayMaxEvents: true,
dayHeaderFormat: {
weekday: "short",
month: "numeric",
day: "numeric",
omitCommas: true,
},
buttonText: {
today: "วันนี้",
month: "เดือน",
week: "สัปดาห์",
day: "วัน",
list: "กำหนดการ",
},
locale: "th",
events: [this.eventDateSet],
};
You might wanna try with the initialEvents property of your CalendarOptions.
Also, your events should be of type EventInput which doesn't contain a dateStart or dateEnd property but just start and end.
I am trying to use the Full Calendar component to show 3 days in agenda Day view or eventually using the vertical resource view.
I tried using the example custom view but no luck.
Is it possible to show 3 days, one below another in the day view ?
I am using this constructor, but I don't want the days to be next to each other, but underneath each other.
$('#calendar').fullCalendar({
defaultView: 'agendaDay',
defaultDate: '2017-12-07',
editable: true,
selectable: true,
eventLimit: true, // allow "more" link when too many events
header: {
left: 'prev,next today',
center: 'title',
right: 'agendaDay,agendaTwoDay,agendaWeek,month'
},
views: {
agendaTwoDay: {
type: 'agenda',
duration: { days: 3 },
// views that are more than a day will NOT do this behavior by default
// so, we need to explicitly enable it
//groupByResource: true
//// uncomment this line to group by day FIRST with resources underneath
groupByDate: true
}
}
You can't show the days below each other in an agenda style view, no. Its whole layout scheme is oriented horizontally. You can easily show them side-by-side, in the normal agenda style.
The vertical resource view provided by the Scheduler plug-in is essentially the same as the agenda view, but with each day split out into sub-columns for each specified Resource.
If you want days to appear one below the other, your only option is the "list"-style view. This will show things vertically, but you lose the time grid.
This code will achieve both of those types of view with a 3-day span, so you can see the difference:
views: {
agendaThreeDay: {
type: 'agenda',
duration: {
days: 3
},
buttonText: '3 day agenda'
},
listThreeDay: {
type: 'list',
duration: {
days: 3
},
buttonText: '3 day list'
}
},
Here is a working demo: http://jsfiddle.net/sbxpv25p/104/
If neither of those satisfy what you want, then your only other option is to make a completely custom view type (see the second half of this documentation page: https://fullcalendar.io/docs/views/Custom_Views/). This is a complex and time-consuming task, so before embarking on such a thing you should consider whether one of the built-in types of view will really be satisfactory - they do convey the necessary information to the user, which is the main purpose of a calendar, even if it wasn't quite in exactly the layout you had imagined.
In order to show multiple days in Agenda View ( Day ) just add - and + how many hours you want ... For example -24 H for a day ahead and +24 H for a day after your selected day. Something like this:
views: {
firstView: {
type: 'agendaDay',
minTime: '-12:00:00',
maxTime: '36:00:00',
slotDuration: '00:30:00',
},
}
views: {
timeGridFourDay: {
type: 'timeGrid',
duration: { days: 4 },
buttonText: '4 day'
}
},
and add it to header:
header: {
left: 'prev,next',
center: 'title',
right: '.....,timeGridFourDay'
},
https://fullcalendar.io/docs/custom-views
Is there a way in fullcalendar on the week view to move by 1 day (next/prev buttons) instead of jumping 1 week back and forth?
The reason behind is because when I create an event on the week view I am limited to the last day and can't prolong it to the next week...
They now have added dateIncrement as a option.
$('#calendar').fullCalendar({
header: {
left: 'today prev,next',
center: 'title',
right: 'CustomW,CustomF,CustomS',
},
views: {
CustomW: {
type: 'timelineWeek',
duration: { days: 7 },
buttonText: 'Week',
dateIncrement: { days: 1 },
},
CustomF: {
type: 'timelineWeek',
duration: { days: 15 },
buttonText: '15 day',
dateIncrement: { days: 4 },
},
CustomS: {
type: 'timelineMonth',
duration: { days: 30 },
buttonText: 'Month',
dateIncrement: { days: 10 },
},
},
Okay I figured out how to make this work for both subtraction and addition. I had to alter the fullcalendar.js file itself which means there could be some other complications as I have not tested this beyond clicking the next and previous buttons. I would not recommend doing this approach if you plan on utilizing more than one view.
Force currentview to change on click
Comment out lines 9741 - 9747 and 9759
This allows the currentview to change when clicking the next button even though you haven't actually left the currentview
Previous Click
Line 7931 needs to be changed to
date.clone().startOf('day').subtract(1)
Next Click
Line 7939 needs to change to
date.clone().startOf('day').add(1, 'day')
You can create custom view like this:
$('#calendar').fullCalendar({
header: {
center: 'month,basicWeekOneDay' // buttons for switching between views
},
views: {
basicWeekOneDay: {
type: 'basicWeek',
duration: { days: 1 },
buttonText: '1 day'
}
}
});
Here is fiddle for the same:
https://jsfiddle.net/raj20090/j99f7zqw/2/