I want to allow only limited selection at once in full calendar booking process, for example only 5 or 4 slots can be booked at one time i tried to show better in the image pls check img attachment, Thanks
Image here https://i.stack.imgur.com/dLkYj.png
Here is my code
$(document).ready(function() {
var calendar = $('#calendar').fullCalendar({
timeZone: 'America/Caraca',
initialView: 'timeline',
allDaySlot: false,
views: {
dayGridMonth: {
}
},
editable:true,
header:{
center:' ',//'prev,next today',
left:'title',
right:'<span></'
},
businessHours: {
// days of week. an array of zero-based day of week integers (0=Sunday)
dow: [0, 1, 2, 3, 4, 5, 6], // Monday - sunday
start: '<?php echo $detData['stime']; ?>', // a start time (10am in this example)
end: '<?php echo $detData['endtime']; ?>', // an end time (6pm in this example)
},
events:{
url: '<?php echo URL; ?>includes/action/teacher/booking_info.php',
data: {home:'2',key:'<?php echo $teacherProfile['id']; ?>'},
type: "GET",
},
selectable: true,
selectConstraint: "businessHours",
select: function (start, end, jsEvent, view) {
$("#calendar").fullCalendar('addEventSource', [{
start: start,
end: end,
rendering: 'background',
block: true,
}, ]);
},
eventRender: function(event, eventElement) {
if(event.status == 1) {
eventElement.addClass('available');
}
if(event.status == 2) {
eventElement.addClass('booked');
eventElement.attr('data-bs-toggle','tooltip')
eventElement.attr('data-bs-placement','top')
eventElement.attr('title','Booked')
}
if(event.status == 3)
{
eventElement.addClass('booked-other');
}
},
});
$('.fc-content-col.booked').addClass('data-bs-toggletooltip')
});
I am having problem with showing last day of event on calendar itself, i searched all Stack Overflow and google and but didn't found any working solution to this.
Format of date is YYYY-MM-DD, ex. 2021-03-20
JSON output on calendar for "dddddddddddddddd" event, this is just for example, issue of last day not showing is on all events not just one.
allDay: true
color: "#f9cb9c"
description: ""
end: "2021-03-21"
event_employees: "2,5,6,7,38"
event_vehicle: "2"
id: "35"
start: "2021-03-15"
title: "dddddddddddddddd"
Here is calendar code
document.addEventListener('DOMContentLoaded', function() {
calendarEl = document.getElementById('calendar');
calendar = new FullCalendar.Calendar(calendarEl, {
themeSystem: 'bootstrap',
headerToolbar: {
left: 'prev today',
center: 'title',
right: 'next'
},
locale: 'hr',
initialView: 'dayGridMonth',
editable: true,
selectable: true,
droppable: true, // this allows things to be dropped onto the calendar
dayMaxEvents: true, // when too many events in a day, show the popover
eventDidMount: function(info) {
$(info.el).tooltip({
title: info.event.extendedProps.description,
container: 'body',
placement: 'top',
trigger: 'hover',
html: true,
template: '<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>'
});
},
events: 'get_events.php',
views: {
dayGridMonth: {
titleFormat: {
month: 'long',
year: 'numeric'
}
}
}
});
calendar.render();
});
get_events.php
$query = $pdo->prepare("SELECT * FROM events");
$query->execute();
$result = $query->fetchAll(PDO::FETCH_ASSOC);
$data = array();
foreach ($result as $val) {
$data[] = array(
'id' => $val['id'],
'title' => $val['title'],
'start' => date('Y-m-d', strtotime($val['start_event'])), // date output format 2021-03-20
'end' => date('Y-m-d', strtotime($val['end_event'])), // date output format 2021-03-20
'color' => $val['event_color'],
'description' => $val['event_description'] == null ? '' : $val['event_description'],
'event_vehicle' => $val['event_vehicle'],
'event_employees' => $val['event_employees'],
'allDay' => true // all day is true for every event
);
}
echo json_encode($data);
Here is image with json output in console
I have implemented fullcalender version 5 in out project.page refreshes on each event add/edit.i dont want it to happen.can any one suggest me how to resolve this issue.
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
now: '',
editable: true,
headerToolbar: {
left: 'today prev,next',
center: 'title',
right: 'resourceTimelineDay,timeGridWeek,dayGridMonth'
},
resources: <?php eventGroups(); ?>,
events: <?php eventGroupsDetails(); ?>,
dateClick: function(info) {
$('#addScheduleEntry').modal('show');
},
});
calendar.render();
});
function eventGroupsDetails() {
echo '[';
$event = '';
$event_qry = "SELECT * FROM st_Event WHERE 1=1 AND status=1 ORDER BY event_id DESC limit 5";
$event_query = mysqli_query($mysqli, $event_qry);
while ($arr = mysqli_fetch_array($event_query)) {
$event_id = $arr['event_id'];
$user_id = $arr['user_id'];
$event_title = $arr['event_title'];
if ($event_title == "") {
$event_title = $arr['event_job_id'];
}
I'm using FullCalendar v3 (latest) with a PHP backend.
I'm returning a JSON array from the backend broken up into 2 arrays. The first contains event details (a list of orders for the day, with the order# as the title), and the second contains a daily summary (with a sum of orders and work hours as the title). The array looks like this:
{"events":[{"id":709989,"item_no":"ABC123","title":709989,"color":"red","start":"2019-05-14","end":"2019-05-14","allDay":true,"total_hours":3,"remaining_hours":1.5},{"id":709990,"title":709990,"item_no":"ABC345","color":"red","start":"2019-05-15","end":"2019-05-15","allDay":true,"total_hours":5.7,"remaining_hours":3.2}],"summary":[{"id":338823,"title":"Orders: 14\rHours:28.33\rRemaining Hours:13.33","start":"2019-05-14","end":"2019-05-14","allDay":true},{"id":338824,"title":"Orders: 3\rHours:14.2\rRemaining Hours: 12.2","start":"2019-05-15","end":"2019-05-15","allDay":true}]}
There are other properties but these are the basics.
What I'm trying to do is change the array that's used as the event source depending upon which view is selected. I've tried custom event rendering, custom view rendering, multiple event sources (even though it's expensive from a data point-of-view, the # of records aren't so numerous that it greatly effects performance).
The custom view name is customMonth. When this view is selected, I just want to render the summary data (from the summary array). If any of the other views are selected (I'm using basicWeek, month and listWeek), render the events array.
let vname;
$("#calendar").fullCalendar({
defaultDate: new Date(),
defaultView: 'month',
eventRender: function(eventObj, $el, view) {
let n = view.name;
if(n=='customMonth')
{
vname = 'customMonth';
$el.popover({
title: eventObj.title,
content: eventObj.total_hours,
html: true,
trigger: 'hover',
placement: 'auto',
container: 'body'
});
} else {
vname = n;
$el.popover({
title: "Work Order " + eventObj.title,
content: '<strong>Item#</strong>: ' + eventObj.item_no + '<br />' + '<strong>Total Hours</strong>: ' + eventObj.total_hours + '<br />' + '<strong>Remaining Hours</strong>: ' + eventObj.remaining_hours,
html: true,
trigger: 'hover',
placement: 'auto',
container: 'body'
});
}
},
events: function(start, end, timezone, callback){
$.ajax({
url: '/myendpoint',
type: 'POST',
dataType: 'json',
data: {
action: 'get-calendar-summary',
cell: selected_cell
},
success: function(data) {
let events = [];
if(vname=='customMonth') {
obj = data.summary;
$(obj).each(function() {
events.push({
id: $(this).attr('id'),
title: $(this).attr('title'),
start: $(this).attr('dept_due_dt'),
end: $(this).attr('dept_due_dt'),
total_hours: $(this).attr('total_hours'),
remaining_hours: $(this).attr('remaining_hours'),
order_count: $(this).attr('day_order_count'),
has_late_order: $(this).attr('has_late_order'),
allDay: true,
earliest_date: $(this).attr('earliest_date')
});
});
} else {
obj = data.event_results;
$(obj).each(function() {
events.push({
id: $(this).attr('id'),
color: $(this).attr('color'),
title: $(this).attr('title'),
start: $(this).attr('start'),
end: $(this).attr('end'),
earliest_date: $(this).attr('earliest_date'),
item_no: $(this).attr('item_no'),
total_hours: $(this).attr('total_hours'),
remaining_hours: $(this).attr('remaining_hours')
});
});
}
callback(events);
},
error: function(err) {
console.log(err);
}
});
},
views: {
customMonth: {
type: 'month',
buttonText: 'overview'
}
},
viewRender: function(view, el) {
let lastview;
if(view.name=='customMonth') {
if(lastview == 'customMonth') {
return false;
} else {
view.unrenderDates();
view.renderDates();
$("#calendar").fullCalendar('rerenderEvents');
}
lastview = 'customMonth';
} else {
if(lastview=='customMonth') {
view.unrenderDates();
view.renderDates();
$("#calendar").fullCalendar('rerenderEvents');
}
lastview = view.name;
}
},
header: {
left: 'prev,next',
center: 'title',
right: 'basicWeek,month,listWeek,customMonth'
},
themeSystem: 'bootstrap3',
timeZone: false,
weekends: false,
//tried with and without lazyFetching
lazyFetching: true
});
I'd appreciate any guidance. I've searched StackOverflow (this seems like the closest, but I followed exactly and it didn't work (switching out viewDisplay for viewRender)), Github, and all other sources I can think of.
Here a simplified example of what you are trying to achieve (I hope I well understand your problem) :
HTML :
<div id='calendar'></div>
Javascript :
$(document).ready(function() {
var ev1 = {"events":[{"id":709989,"item_no":"ABC123","title":'Event from source 1',"color":"red","start":"2019-05-14","end":"2019-05-14","allDay":true,"total_hours":3,"remaining_hours":1.5}]};
var ev2 = {"events":[{"id":709989,"item_no":"ABC123","title":'Event from source 2',"color":"blue","start":"2019-05-14","end":"2019-05-14","allDay":true,"total_hours":3,"remaining_hours":1.5}]};
$('#calendar').fullCalendar({
defaultDate: new Date(),
defaultView: 'month',
viewRender: function(view) {
if(view.type === 'basicWeek') {
$('#calendar').fullCalendar( 'removeEventSource', ev1 );
$('#calendar').fullCalendar( 'addEventSource', ev2 );
return;
}
},
header: {
left: 'prev,next',
center: 'title',
right: 'basicWeek,month,listWeek,customMonth'
},
});
$('#calendar').fullCalendar( 'addEventSource', ev1 );
});
And the codepen to try it.
It uses the callback function viewRender() to detect when a view change and addEventSource()/removeEventSource() to change the data. So when you change the view from month to week it will change the source events.
How to read the data calendar en Google stored in the database, to view fullcalendar integration with fire Google calendar?
JS fullcalendar:
ar a ='<?php echo $class_id?>';
$(document).ready(function() {
$('#event').fullCalendar({
aspectRatio: 2.4,
googleCalendarApiKey: 'AIzaSyC-Fax449D0FdfSBiRaSGHfw3leXKxD0E4',
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
allDayDefault: false,
editable: false,
events: {
url: "events/" + a ,
},
timeFormat: 'H(:mm)' ,
});
});
Controller call to calendar address id:
public function events($class_id)
{
$this->load->model('event_model');
$events = array();
$e = array();
$data['google'] = $this->event_model-> list_event_google_class($class_id);
foreach ($data['google'] as $value) {
$arr = array
('googleCalendarId'=>$value['google_calendar_id'] );
}
echo json_encode($arr);
}