We Keep Coding

Fullcalendar resourceTimeGrid month view render

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

after rendering, events not being shown in 24 hour format Full Calendar

I have started fullCalendar with such configurations as
config: {
plugins: [interactionPlugin, dayGridPlugin, timeGridPlugin, listPlugin, momentPlugin],
// axisFormat: 'HH',
slotLabelFormat:"HH:mm",
defaultView: 'timeGridWeek',
allDaySlot: false,
slotDuration: '00:60:00',
columnFormat: 'dddd',
columnHeaderFormat: { weekday: 'short' },
defaultDate: '1970-01-01',
dayNamesShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
eventLimit: true,
eventOverlap: false,
eventColor: '#458CC7',
firstDay: 1,
height: 'auto',
selectHelper: true,
selectable: true,
timezone: 'UTC',
header: {
left: '',
center: '',
right: ''
},
editable: true,
events: null,
eventTimeFormat: { // like '14:30:00'
hour: '2-digit',
minute: '2-digit',
meridiem: false
}
},
and I am trying to show events with start and end time with 24 Hour format. but they are being rendered in 12 Hour format. Below is the output I am getting currently and the last image is the output I actually want.
This is how events are being rendered to Calendar.
renderEvents () {
const schedule = JSON.parse(this.schedule)
const calendarWeek = this.currentCalendarWeek()
const days = Object.keys(schedule)
days.forEach((weekDay) => {
const day = schedule[weekDay]
if (day.length != 0) {
day.forEach((event) => {
const start = event.split('-')[0]
const end = event.split('-')[1]
const addEvent = {
id: this.generate_random_string(4),
start: moment(`${calendarWeek[weekDay]} ${start}`, 'YYYY-MM-DD HH:mm')._i,
end: moment(`${calendarWeek[weekDay]} ${end}`, 'YYYY-MM-DD HH:mm')._i
}
this.calendar.addEvent(addEvent)
})
}
})
},
and this.schedule is
schedule: JSON.stringify({
Monday: ['08:00-18:00'],
Tuesday: ['08:00-18:00'],
Wednesday: ['08:00-18:00'],
Thursday: ['08:00-18:00'],
Friday: ['08:00-18:00'],
Saturday: [],
Sunday: []
}),
Even on adding a new event. it doesnt come as 24 hour time format
How I can get output like this instead.

To get a 24-hour format, you have two ways to do it.
You can either
1) Set the hour12: false option in your eventTimeFormat, e.g.
eventTimeFormat: {
hour: "2-digit",
minute: "2-digit",
hour12: false
}
Demo: https://codepen.io/ADyson82/pen/xxwdNYa
(The eventTimeFormat documentation does describe this, but a bit inaccurately / unclearly. The general fullCalendar date formatting documentation makes it much clearer though, if you check there.)
OR
2) Since you're already using the momentJS plugin (and already using it to set the time format of your slots), you could use the simple time format identical to the one you've already set for slotLabelFormat:
eventTimeFormat: "HH:mm"
Demo: https://codepen.io/ADyson82/pen/KKdmLbv

How to make events from one source render in background

I have added events to my calendar from two sources. One source is a json object and other is a google calendar. Now, I want to make events from google calendar render as background events (nothing should happen if user clicks on it) and for json events I need to perform some action when user clicks on it.
This is my code:
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
googleCalendarApiKey: 'AIzaSyACMTvM6xtGLSgkyLZqKw2t4chXf-tw8u8',
plugins: ['dayGrid', 'timeGrid', 'list', 'interaction', 'bootstrap', 'rrule', 'moment', 'googleCalendar'],
themeSystem: 'bootstrap',
timeZone: 'Asia/Colombo',
height: 'auto',
fixedWeekCount: false,
slotDuration: '00:15:00',
slotLabelInterval: '01:00:00',
navLinks: true,
nowIndicator: true,
selectable: true,
selectMirror: true,
slotLabelFormat: {
hour: 'numeric',
minute: '2-digit',
omitZeroMinute: false,
},
businessHours: {
// days of week. an array of zero-based day of week integers (0=Sunday)
daysOfWeek: [1, 2, 3, 4, 5, 6], // Monday - saturday
startTime: '09:00', // a start time
endTime: '16:00', // an end time
},
views: {
listDay: {
buttonText: 'Todays events'
},
listWeek: {
buttonText: 'This week events'
},
listMonth: {
buttonText: 'This month events'
}
},
footer: {
center: 'listDay listWeek listMonth'
},
header: {
left: 'prevYear,prev,next,nextYear today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay'
},
eventSources: [
// your event source
{
events: {!!$ce!!
},
color: 'blue',
editable: true
},
{
googleCalendarId: 'en.lk#holiday#group.v.calendar.google.com',
rendering: 'background',
color: 'yellow',
editable: false
}
],
select: function(info) {
alert('selected ' + info.startStr + ' to ' + info.endStr);
}
/* #can('isManager')
events: 'https://fullcalendar.io/demo-events.json'
#endcan */
});
calendar.render();
});
<div class="container-fluid mt--7">
<div class="row">
<div class="col-xl-12 mb-5 mb-xl-0">
<div class="card bg-white shadow">
<div class="card-body">
<div id="calendar" style="height: 800px;"></div>
</div>
</div>
</div>
</div>
</div>
But my google calendar events don't show as background events.
I try to add ids for each event sources like below and it makes my entire calendar disappear:
eventSources: [
// your event source
{
id='a',
events:{!! $ce !!},
color: 'blue',
editable:true
},
{
id='b',
googleCalendarId: 'en.lk#holiday#group.v.calendar.google.com',
rendering: 'background',
color: 'yellow',
editable:false
}
],
Now I need at least a way to identify events from each source separately.
I also tried
info.event.source
and
info.event.source.id
and even
info.event.color
to use as my identifier, but info.event.source shows as an object and info.source.id, info.source.color show as undefined properties
also this is how I pass JSON to my laravel view from controller'
<?php
namespace App\Http\Controllers;
use App\Http\Controllers\Controller;
use Illuminate\Support\Facades\DB;
class HomeController extends Controller
{
/**
* Create a new controller instance.
*
* #return void
*/
public function __construct()
{
$this->middleware('auth');
}
/**
* Show the application dashboard.
*
* #return \Illuminate\View\View
*/
public function index()
{
$calender_events = DB::table('calender_events')->get();
$ce = $calender_events->toJson();
return view('dashboard', compact('ce'));
}
}
Please help.

I found answer my self,
<script>
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
googleCalendarApiKey: 'AIzaSyACMTvM6xtGLSgkyLZqKw2t4chXf-tw8u8',
plugins: [ 'dayGrid', 'timeGrid', 'list','interaction','bootstrap','rrule','moment','googleCalendar' ],
themeSystem: 'bootstrap',
timeZone: 'Asia/Colombo',
height: 'auto',
fixedWeekCount:false,
slotDuration: '00:15:00',
slotLabelInterval:'01:00:00',
navLinks:true,
nowIndicator: true,
selectable: true,
selectMirror:true,
slotLabelFormat:{
hour: 'numeric',
minute: '2-digit',
omitZeroMinute: false,
},
businessHours: {
// days of week. an array of zero-based day of week integers (0=Sunday)
daysOfWeek: [ 1, 2, 3, 4, 5, 6 ], // Monday - saturday
startTime: '09:00', // a start time
endTime: '16:00', // an end time
},
views: {
listDay: { buttonText: 'Todays events' },
listWeek: { buttonText: 'This week events' },
listMonth: { buttonText: 'This month events' }
},
footer:{
center: 'listDay listWeek listMonth'
},
header: {
left: 'prevYear,prev,next,nextYear today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay'
},
eventSources: [
// your event source
{
events:{!! $ce !!},
id:'personal',
},
{
googleCalendarId: 'en.lk#holiday#group.v.calendar.google.com',
id:'google',
}
],
eventClick: function(info) {
info.jsEvent.preventDefault(); // don't let the browser navigate
if(info.event.source.id=='google'){
alert('Event: google ');
}else{
alert('Event: personal ');
}
},
});
calendar.render();
});
</script>
I just missed a comma near
googleCalendarId: 'en.lk#my#group.v.calendar.google.com',
id:'google',
and
events:{!! $ce !!},
id:'personal',
and for background rendering , full-calendar event source object doesn't have option "rendering" (only single events can render in background)
anyway thanks for your help!.

I cant get data from day where I drop in full calendar

I have this fullcalendar:
$('#calendar').fullCalendar({
height: 700,
locale: 'es',
header: {
left: 'prev,next, month basicWeek today',
center: 'title',
right: ''
},
buttonText: {
today: 'Hoy',
month: 'Mes',
week: 'Semana'
},
editable: true,
weekends: true,
droppable: true, // this allows things to be dropped onto the calendar
dragRevertDuration: 0,
events: $scope.events,
drop: function(date, jsEvent, ui, resourceId) {
console.log("DROP!")
}
});
I would like in drop event, get data of this day.
I drag event and drop in day 1, that it has an event called "Carmen Donoso | BAJA", and when I drop it I would like to get this event.
Thanks

Split day agenda in full calendar into 15-minute slots

$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
buttonText: {
today: 'today',
month: 'month',
week: 'week',
day: 'day'
},
//Random default events
events : <?php echo json_encode($events1);?>,
editable: true,
droppable: true, // this allows things to be dropped onto the calendar !!!
drop: function (date, allDay) { // this function is called when something is dropped
i need to split into 15 minutes interval.the default is 30 minutes slots.how can i achieve it thank u in advance

I think you're looking for slotDuration: http://fullcalendar.io/docs/agenda/slotDuration/