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.

fullCalendar wont load title on document.ready

I have a fullCalendar on my site which should load the month when the page is loaded up, but for some reason the month's title wont load until a month selection button is pressed.
I'm probably overlooking something simple, could anyone have a look at tell me where I'm going wrong.
Here is my code:
$(document).ready(function() {
$(".calendar").fullCalendar({
defaultDate: new Date(),
editable: false,
firstDay: 1,
timezone: 'local',
header: {
left: "",
center: "prev, title, next",
right: ""
},
defaultView: 'month',
viewDisplay: function(view) {
},
columnFormat: {
month: 'dddd',
week: 'dddd D/M',
day: 'dddd D/M'
},
allDayDefault: false,
eventSources: [
// your event source
{
url: 'https://www.burtonstreetcrm.co.uk/scripts/booking_session_calendar.php', // use the `url` property
textColor: 'white' // an option!
}
// any other sources...
],
eventOrder: "lookup_building",
// Convert the allDay from string to boolean
eventRender: function(event, element, view) {
// end hide dates //
if (event.allDay === 'true') {
event.allDay = true;
} else {
event.allDay = false;
}
},
eventClick: function(event) {
if (event.id) {}
},
selectable: true,
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.js"></script>
<div id="calendar" class="calendar"></div>

The issue is with columnFormat: {
month: 'dddd',
week: 'dddd D/M',
day: 'dddd D/M'
},
As per document it accepts string value not Array
so
columnFormat:'dddd' will give you expected output
$(document).ready(function() {
$(".calendar").fullCalendar({
defaultDate: new Date(),
editable: false,
firstDay: 1,
timezone: 'local',
header: {
left: 'prev,next today',
center: 'title',
right: 'year,month,agendaWeek,agendaDay'
},
defaultView: 'month',
viewDisplay: function(view) {
},
columnFormat:'dddd',
allDayDefault: false,
eventSources: [
// your event source
{
url: 'https://www.burtonstreetcrm.co.uk/scripts/booking_session_calendar.php', // use the `url` property
textColor: 'white' // an option!
}
// any other sources...
],
eventOrder: "lookup_building",
// Convert the allDay from string to boolean
eventRender: function(event, element, view) {
// end hide dates //
if (event.allDay === 'true') {
event.allDay = true;
} else {
event.allDay = false;
}
},
eventClick: function(event) {
if (event.id) {}
},
selectable: true,
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.js"></script>
<div id="calendar" class="calendar"></div>

fullcalendar- only get the selected event by user

Is there any possibility of only getting the selected event by user click and not the events already populated in fullcalendar?
I looked into documentations but couldn't find much help there.
Though, I understand I can get all events by:
$("#calendar").fullCalendar( 'clientEvents' [, idOrFilter ] ) -> Array
But I don't want this. And I am of-course using select.
The other notable thing here is I want this value in another JS file. so,
eventClick: function (selectedEvent) {
//selectedEvent.id
//selectedEvent.
}
won't actually work for my case.
Here's how my config of fullCalendar looks like:
$("#calendar").fullCalendar({
weekends: false,
defaultView: 'agendaWeek',
slotDuration: '00:30', // hours/minutes
allDaySlot: false,
header: {
left: 'today prev,next',
center: 'title',
right: ''
},
height: "auto",
contentHeight: 600,
events: [
{
title : 'event1',
start : '2017-05-01T12:30:00'
},
{
title : 'event2',
start : '2017-05-09T12:30:00',
end : '2010-05-09T13:30:00'
},
{
title : 'event3',
start : '2010-01-09T12:30:00',
allDay : false // will make the time show
}
],
businessHours: [ // specify an array instead
{
dow: [ 1, 2, 3 ], // Monday, Tuesday, Wednesday
start: '08:00', // 8am
end: '18:00' // 6pm
},
{
dow: [ 4, 5 ], // Thursday, Friday
start: '10:00', // 10am
end: '16:00' // 4pm
}
],
dayRender: function( date, cell ) {
alert('Clicked on: ' + date);
alert('Coordinates: ' + cell);
// alert('Current view: ' + view.name);
},
selectable: true,
selectConstraint: "businessHours",
select: function() { ... },
})

Try to use eventClick:
eventClick: function (selectedEvent) {
//selectedEvent.id
//selectedEvent.title
}

Add event to every day if the day is empty

To better understand my question, take a look at the JSFiddle Example.
Basically there are tree kinds of unique items on the calendar that are all day events: Today, Completed, and Incomplete days. I need to figure a way to populate days that don't have anything on them (Today, or Incomplete), in this case they would be populated with "Completed". How can I figure out what these days are?
Also any way to limit the calendar to a set months range? For instance Quarter 1 would be Dec 1st to Mar 31st.
//Calendar
$(document).ready(function() {
// Figure out todays date and provide link to enter data
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
// Staff Data Calendar
$('#calendar-staff').fullCalendar({
header: {
left: '',
center: 'title',
},
businessHours: true, // display business hours
handleWindowResize: true, // responsive layout
editable: false,
events: [
// red areas where no events can be dropped
{
title: 'No Data',
start: '2015-02-03',
url: '#',
color: '#E64C65'
},
{
title: 'No Data',
start: '2015-02-17',
url: '#',
color: '#E64C65'
},
{
// Display Today
title: 'Enter Data for Today',
url: 'staffing_data_edit.html',
color: '#5E9EF3',
start: new Date(y, m, d)
}
]
});
});

You can use and apply a custom check on a event dayRender Click here for reference
Or you can use event eventAfterAllRender which call after the calendar is ready to draw. you can use a loop and check the empty days.
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultDate: '2018-10-25',
navLinks: true, // can click day/week names to navigate views
selectable: false,
selectHelper: true,
select: function(start, end) {
},
dayRender: function(date, cell )
{
console.log(date);
console.log(cell);
},
eventRender: function(event, element, view) {
},
eventAfterAllRender: function(view)
{
if (view.name == "month") {
var allEvents = $('#calendar').fullCalendar('clientEvents');
for (var index in allEvents) {
var event = allEvents[index];
}
}
},
eventClick: function(event) {
return false;
},
loading: function(bool) {
//$('#loading').toggle(bool);
},
timezone: true,
editable: false,
eventLimit: true, // allow "more" link when too many events
eventLimitTex: 'More shifts',
events: eventsJson
});