We Keep Coding

FullCalendar 5 - How to show a coloured dot to the left of events in initialView: 'timeGridWeek' instead of solid fill

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

Drag and drop full calendar doesn't fire php script

Using fullcalendar with php scripts for submitting the ajax through to php/myql connection.
I've added a drag and drop feature to the page/fullcalendar and it renders fine on the page, works, and no problems. When you normally click and type an event, its fires the script and uses PHP to add via mysql.
The problem is, once the drag and drop element has been dropped on the calendar, I need to execute the same script as if you were to use when its clicked and typed on. I might have been working on this for too long as now I've confused myself!
Script is:
<script>
$(document).ready(function() {
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
// initialize the external events
// -----------------------------------------------------------------
$("#external-events .fc-event").each(function() {
// store data so the calendar knows to render an event upon drop
$(this).data("event", {
title: $.trim($(this).text()), // use the element's text as the event title
stick: true // maintain when user navigates (see docs on the renderEvent method)
});
// make the event draggable using jQuery UI
$(this).draggable({
zIndex: 999,
revert: true, // will cause the event to go back to its
revertDuration: 0 // original position after the drag
});
});
var calendar = $('#calendar').fullCalendar({
editable: true,
droppable: true, // this allows things to be dropped onto the calendar
drop: function() {
// is the "remove after drop" checkbox checked?
if ($('#drop-remove').is(':checked')) {
// if so, remove the element from the "Draggable Events" list
$(this).remove();
}
},
defaultView: 'agendaWeek',
nowIndicator: true,
weekends: false,
firstday: 1,
forceEventDuration: true,
timezoneParam: 'UTC',
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
businessHours: {
// days of week. an array of zero-based day of week integers (0=Sunday)
dow: [ 1, 2, 3, 4, 5 ], // Monday - Friday
start: '07:00', // a start time (10am in this example)
end: '19:00', // an end time (6pm in this example)
},
events: "get/engineer_events.php",
eventRender: function(event, element, view) {
if (event.allDay === 'true') {
event.allDay = true;
} else {
event.allDay = false;
}
},
selectable: true,
selectHelper: true,
select: function(start, end, allDay) {
var title = prompt('Event Title:');
if (title) {
var start = $.fullCalendar.formatDate(start, "Y-MM-DD HH:mm:ss");
var end = $.fullCalendar.formatDate(end, "Y-MM-DD HH:mm:ss");
$.ajax({
url: 'process/add_events.php',
data: 'title='+ title+'&start='+ start +'&end='+ end,
type: "POST",
success: function(json) {
alert('Added Successfully');
}
});
calendar.fullCalendar('renderEvent',
{
title: title,
start: start,
end: end,
},
true
);
}
calendar.fullCalendar('unselect');
},
editable: true,
eventDrop: function(event, delta) {
var start = $.fullCalendar.formatDate(event.start, "Y-MM-DD HH:mm:ss");
var end = $.fullCalendar.formatDate(event.end, "Y-MM-DD HH:mm:ss");
$.ajax({
url: 'process/update_events.php',
data: 'title='+ event.title+'&start='+ start +'&end='+ end +'&id='+ event.id ,
type: "POST",
success: function(json) {
alert("Your event has been added.");
}
});
},
eventClick: function(event) {
var decision = confirm("Woah, you're about to delete this, are you sure?");
if (decision) {
$.ajax({
type: "POST",
url: "process/delete_event.php",
data: "&id=" + event.id,
success: function(json) {
$('#calendar').fullCalendar('removeEvents', event.id);
alert("Updated successfully");}
});
}
},
eventResize: function(event) {
var start = $.fullCalendar.formatDate(event.start, "yyyy-MM-dd HH:mm:ss");
var end = $.fullCalendar.formatDate(event.end, "yyyy-MM-dd HH:mm:ss");
$.ajax({
url: 'process/update_events.php',
data: 'title='+ event.title+'&start='+ start +'&end='+ end +'&id='+ event.id ,
type: "POST",
success: function(json) {
alert("Event updated successfully");
}
});
}
});
});
</script>

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
});

Creating events on multiple calendars with FullCalendar.js

I am using the FullCalendar javascript library on my web site to display a calendar for each employee side-by-side. The calendar displays the Day view so it's easy to see everyones schedule for the day.
I have all of the calendars displaying properly side-by-side (each in their own div).
My problem is, when creating a new event by clicking on the calendar, the event always gets created on the last calendar on the page instead of the actual calendar you click on. I have a feeling it has to do with closure in the select callback function.
/*
* Setup calendars for each sales person
*/
var d = $.fullCalendar.parseDate($("#requested_date").val());
//employee id numbers (each employee has own calendar)
var employees = new Array(445,123,999,444);
for(i=0;i<employees.length;i++)
{
var employeeId = employees[i];
//clear any prevoius calendar info
$('#calendar_' + employeeId).html("");
calendar[employeeId] = $('#calendar_' + employeeId).fullCalendar({
header: {
left: '',
center: '',
right: ''
},
year: d.getFullYear(),
month: d.getMonth(),
date: d.getDate(),
defaultView: 'agendaDay',
minTime: 7,
maxTime: 19,
height: 650,
editable: true,
selectable: true,
selectHelper: true,
select: function(start, end, allDay) {
calendar[employeeId].fullCalendar('renderEvent',
{
title: "This Estimate",
start: start,
end: end,
allDay: allDay
},
true // make the event "stick"
);
calendar[employeeId].fullCalendar('unselect');
},
events: {
url: 'calendar/'+employees[employeeId],
type: 'POST',
data: {
'personId': employees[employeeId],
'ci_csrf_token': wp_csr_value
},
error: function() {
alert('there was an error while fetching events!');
}
}
});
}
Thanks

when you select a calendar employeesId is equal to 444 so it render event on the last calendar try this:
select: function(start, end, allDay , jsEvent ,view) {
$(view.element).parent().parent().fullCalendar('renderEvent',
{
title: "This Estimate",
start: start,
end: end,
allDay: allDay
},
true // make the event "stick"
);
$(view.element).parent().parent().fullCalendar('unselect');
}

Fullcalendar: How can get selected start and selected end datetime on fullcalendar through calendar object?

I have gone through other post of fullcalendar but i couldn't fine what i need.
In "Select" callback event under fullcalendar, i could get start,end datetime values which are selected by user. I want this values through calendar object as i need to use this in other function.
http://arshaw.com/fullcalendar/docs/selection/select_callback/
Can any one please share me , how to get start/end value through calendar object ?

$(document).ready(function () {
// Calendar
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
var calendar = $('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month'
},
selectable: true,
selectHelper: true,
select: function (start, end, allDay) {
var title = prompt('Event Title:'+start+' '+end);
if (title) {
calendar.fullCalendar('renderEvent',
{
title: title,
start: start,
end: end,
allDay: allDay
},
true // make the event "stick"
);
//$('.fc-day-content').html('<div style="position: relative; height: 0px;">xxx</div>');
}
calendar.fullCalendar('unselect');
},
editable: true,
});
// Calendar end
});
SEE "start" and "end" in prompt