We Keep Coding

I am using Full calendar resource timeline week view, version 5. The dates are scrolled horizontally. I want to scroll the dates vertically

Is there any way to achieve vertical scrolling of dates.Can it be done with the help of css change ?
This is my code for the calendar. Is there any other JS calendar that has verrtical scroll of dates in week view ?
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
selectable: true,
resourceAreaWidth:'10%',
locale: 'ja',
slotDuration:'00:30:00',
aspectRatio: 2.8,
slotMinTime:"08:30:00",
slotMaxTime:"20:30:00",
slotLabelInterval:"00:30:00",
//eventContent: 'some text', timeGridWeek listWeek
headerToolbar: {
left: '',
center: 'title',
right: 'resourceTimelineDay resourceTimelineFiveDays'
},
footerToolbar: {
center: 'prev next'
},
initialView: 'resourceTimelineDay',
views: {
resourceTimelineFiveDays: {
type: 'resourceTimeline',
duration: { days: 5 },
buttonText: '週'
},
resourceTimelineDay: {
type: 'resourceTimeline',
duration: { days: 1 },
buttonText: '今日'
}
},

Resource render hook control doesn't respond

I struggle to activate a resource label render hook. It works perfectly in the provided example and I've tried to mimic this. However, had no success. No errors, nothing crushed. It's just not active. Here's my JS calendar setup file:
document.addEventListener('DOMContentLoaded', function() {
//Initialize calendar
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
schedulerLicenseKey: 'GPL-My-Project-Is-Open-Source', //hide lices=nc=se warning
plugins: [ 'resourceTimeline', 'bootstrap', 'interaction' ], //connect plugins to page
defaultView: 'resourceTimelineMonth', //define timeline view
editable: true, //enable draggable events
droppable: true, //it allows things to be dropped onto the container
resourceGroupField: 'group', //grouping
resourceOrder: 'Projects, Personnel', //order of resources
resourceAreaWidth: '13%', //resource column width
resourceLabelText: 'Projects/Personnel', //resource label
resourcesInitiallyExpanded: true,
resourceLabelDidMount: function(arg) {
arg.el.addEventListener('click', function() {
console.log(arg)
})
},
//resources feeding
resources: {
url: 'scheduler/resources',
method: 'GET'
},
//events feeding
events: {
url: 'scheduler/events',
method: 'GET'
},
defaultTimedEventDuration: '24:00', //deafult event duration
weekNumberCalculation: 'ISO', //first day of week Monday
//header layout
header: {
left: 'prev,next today ',
center: 'title',
right: 'resourceTimelineMonth, resourceTimelineYear,'
},
//footer
footer: true,
footer: {
},
height: 'auto', //calendar window size (including header and footer)
//text on standard buttons
buttonText: {
today: 'Today',
month: 'Month',
year: 'Year'
},
});
calendar.render();
});
The calendar is rendered using the Express framework. Perhaps there's a simple line that I've just missed. Very much appreciate any help.
Here's my v.5 scheduler setup file:
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'resourceTimelineMonth',
slotMinWidth: 35,
nowIndicator: true,
editable: true,
droppable: true,
resourceGroupField: 'group',
resourceOrder: 'Projects, Personnel',
resourceAreaWidth: '13%',
resourcesInitiallyExpanded: true,
resourceAreaHeaderContent: 'Projects/Personnel',
resourceLabelDidMount: function(arg) {
arg.el.addEventListener('click', function() {
console.log(arg)
})
},
resources: {
url: 'scheduler/resources',
method: 'GET'
},
events: {
url: 'scheduler/events',
method: 'GET'
},
defaultTimedEventDuration: '24:00',
weekNumberCalculation: 'ISO',
headerToolbar: {
start: 'prev,next today',
center: 'title',
end: 'resourceTimelineMonth resourceTimelineYear'
},
height: 'auto',
buttonText: {
today: 'Today',
month: 'Month',
year: 'Year'
},
});
calendar.render();
Two screenshots:
fullcalendar example In "resource-add-remove" example from fullcalendar site a cursor changes into hand pointer when hovering over a resource label and reacts on click.
codepen example In the codepen example the cursor remains inactive and does not respond.

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!.

Sync FullCalendar With Another FullCalendar Same Page

Using FullCalendar I am able to display 2 calendars on the same page. Calendar1 has all the controls to switch views from Day, Week, Month, Year plus the arrows to go forward/backwards. Calendar2 is a listMonth with no controls showing. It works fine on load but I would like it to change when Calendar1 changes from month to month or year to year.
Is this possible? I haven't found anything that would allow me to change the listMonth when the month/year changes on Calendar1.
jQuery(document).ready(function () {
$('#calendar1').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'agendaDay,agendaWeek,month,listYear'
},
views: {
listYear: { buttonText: 'Year'}
},
navLinks: true, // can click day/week names to navigate views
selectable: true,
selectHelper: true,
editable: false,
eventLimit: true, // allow "more" link when too many events
events: "CalendarData.ashx",
eventColor: '#038ddd'
});
$('#calendar2').fullCalendar({
header: {
left: '',
center: '',
right: ''
},
views: {
listMonth: { buttonText: 'Month' }
},
defaultView: 'listMonth',
navLinks: true, // can click day/week names to navigate views
selectable: true,
selectHelper: true,
editable: false,
eventLimit: true, // allow "more" link when too many events
events: "CalendarData.ashx",
eventColor: '#038ddd'
});
});

I had a need to implement this recently to sync a grid and list view. I came across this question, but the suggested comments no longer appear valid. Here is a simple solution I used.
This is the simple html container for both calendars.
<div>
<div id="calendarGrid"></div>
<div id="calendarList"></div>
</div>
Below is the javascript code to hook into the "datesSet" method that triggers as the user navigates through the calendar and sets the date for the "other" calendar to keep it in sync, including a date comparison to prevent an infinite loop.
var calendarElGrid = document.getElementById('calendarGrid');
var calendarElList = document.getElementById('calendarList');
var calendarGrid = new FullCalendar.Calendar(calendarElGrid, {
initialView: 'dayGridMonth',
datesSet: function (info) {
syncCalendar(calendarList, info.start);
}
});
calendarGrid.render();
var calendarList = new FullCalendar.Calendar(calendarElList, {
initialView: 'listMonth',
datesSet: function (info) {
syncCalendar(calendarGrid, info.start);
}
});
calendarList.render();
function syncCalendar(otherCalendar, startDate) {
if (otherCalendar.getDate().toDateString() != startDate.toDateString()) {
otherCalendar.gotoDate(startDate);
}
}
Solution is based off of v6.0.2 documentation here:
https://fullcalendar.io/docs/datesSet

Jquery FullCalendar not loading in popup

I created a popup with my custom css and js show hide functions. Now I want to place the calendar to that popup.
I tried
$(document).on('click', '.cliker', function () {
$(".succes_msg").remove();
$show = $(this).attr('pkid');
$(this).addClass('activer');
$("input[name=startTime]").val($(this).find("span").eq(0).html()).timepicker();
$(".addbtn").attr('pkId', $show);
$('#calendar').fullCalendar({
defaultView: 'basicWeek',
aspectRatio: 1.5,
header : {
left : 'prev,next',
center: 'title',
right : ''
},
dayOfMonthFormat: 'ddd MMM/MM',
firstDay: 4,
eventLimit: true,
render: true,
height: 250,
buttonText: {
today: 'today',
month: 'month' },
eventSources: [{
url: '{{URL::to(route('get_calender_data'))}}',
type: 'get',
data: {cinema: 0}
}],
});
$(".modelPophldr,.editShow").show();
$(".editShow").animate({'margin-top': '25px'});
});
Like above there I am showing the popup after the fullcalendar rendering.
How to fix it?
Edit...
Right now the calendar is coming with only right and left arrows, but the calendar is not loaded. When I click on the next button it will show the calendar with events perfectly.

display: none removes the element out of the flow of the HTML so you need to call your event when your element becomes visible that why your plugin is working when you click on arrows
try to initialize your plugin after
$(".modelPophldr,.editShow").show();