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
Related
I want to create a calendar with scheduled event, so I fetched the data from my database into controller, process them into the format as it needed, and return an Json array of event object.However, the calendar do not show the event with daysofWeek.
//events is an array of primary key, which will later been used to retrieve data from database in controller
var a = JSON.stringify(events);
$(function () {
$.post('/SchedulingManager/SetVariable',
{ key: a, value: "Test" }, function (result) {
GenerateCalendar(result);
});
});
}));
function GenerateCalendar(array) {
$('#calendar'). fullCalendar({
//theme: true,
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
buttonText: {
today: 'Today',
month: 'Month',
week: 'Week',
day: 'Day',
},
timeFormat: 'hh:mm a',
selectable: true,
defaultView: 'month',
editable: true,
allDaySlot: true,
selectable: true,
slotMinutes: 15,
events:array,
})
}
})();
This is the JSON array that is return from the controller
However, the calendar only shows the event with fix date, but not the events that is with daysofWeek property.( And the time displayed is wrong too for another case).But , when I copy the exactly same code
{ dow: '[1,2,3,4,5]', title: 'OFA-0001 : (test event log)', start: ' 10:00:00 ', end: '11:00:00 ' }
the event is showned .
Event is shown if I create the array in view
No weekly event is showed if the object with daysofWeek is in the array that is retrieved from controller
Can anynone help me with this I am stuck.Thank you.
I am using FullCalendar and i want to make older dates visible but not clickable.
Also i am using validRange property and it is working well, but it only makes them not visible.
FullCalendar version 5.
Here my codes:
document.addEventListener('DOMContentLoaded', function () {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'dayGridWeek',
locale: 'de',
timeZone: 'Europe/Berlin',
hiddenDays: [0, 6],
validRange: {
start: tomorrow()
},
events: 'http://rendezvous.wm/api/available-times/<?php echo $departmentID; ?>',
headerToolbar: {
start: 'title', // will normally be on the left. if RTL, will be on the right
center: '',
end: 'today prev,next' // will normally be on the right. if RTL, will be on the left
},
displayEventEnd: true,
eventTimeFormat: {
hour: '2-digit',
minute: '2-digit',
hour12: false
},
eventClick: function (info) {
window.location.href = "<?php echo WP_HOME . '/terminvereinbaren-details?'; ?>department_id=<?php echo $departmentID
. '&event_start=';?>" + info.event.start.toISOString()+"&event_end="+info.event.end.toISOString()
},
});
calendar.render();
});
and here is the screenshot:
I am using FullCalendar 4 and i have setup the Calendar Object in my script
function createBookingCalendar() {
var calendarEl = document.getElementById('bookingCalendar');
let calendar = new FullCalendar.Calendar(calendarEl, {
locale: 'en-gb', // the initial locale
timeZone: 'Europe/London',
plugins: ['interaction', 'list', 'timeGrid'],
header: {
left: 'prev,next today',
center: 'title',
right: 'listDay,listWeek,timeGridDay,timeGridWeek, dayGridWeek,DayGridMonth'
},
businessHours: [ // specify an array instead
{
daysOfWeek: [1, 2, 3, 4, 5], // Monday - Friday
startTime: '09:00', // 9am
endTime: '18:00' // 6pm
}, {
daysOfWeek: [6], // Saturday
startTime: '10:00', // 10am
endTime: '16:00' // 4pm
}
],
hiddenDays: [7],
// customize the button names,
// otherwise they'd all just say "list"
views: {
listDay: {
buttonText: 'Goto Day View'
},
listWeek: {
buttonText: 'Goto Week View'
},
timeGridDay: {
buttonText: 'Goto Time Grid Day View'
},
timeGridWeek: {
buttonText: 'Goto Time Grid Week View'
}
},
slotDuration: '02:00', // 2 hours
defaultView: 'listWeek',
defaultDate: Date.now(),
navLinks: true, // can click day/week names to navigate views
editable: false,
eventLimit: true, // allow "more" link when too many events
eventSources: [
// CAD Solutions Event Source (Remote Database)
{
url: '../php/getBookings.php',
method: 'GET',
failure: function () {
$.confirm({
theme: 'Modern',
icon: 'fas fa-exclamation-triangle',
title: 'Error',
content: '<p>There was an error fetching the bookings from our database, we appologise for the inconvenience.</p><p class="text-muted">This error has been logged with our engineers.</p><small>Error 0x86451 (Fetch Bookings Database Error)</small>',
type: 'red',
columnClass: 'col-md-6 col-md-offset-3',
buttons: {
close: {
text: 'Close.',
action: function () {
//reset flag and recall the function.
}
}
}
});
}
}
],
eventRender: function (info) {
var tooltip = new Tooltip(info.el, {
title: info.event.title,
content: 'asdadasdqweqweqweqweqwasssd',
placement: 'top',
trigger: 'hover',
container: 'body'
});
},
noEventsMessage: '<div class="panel panel-primary" style="height: 245px;width: 654px;margin:0 auto;padding:10px;margin-top:30px;"><div class="panel-heading"><h4><i class="fas fa-info-circle"></i> There are no bookings for this day.</h4></div><div class="panel-body"><p>There are no bookings saved for this date, you can add a booking to this day using the buttons below, or select a different date.</p><p class="text-muted">You can create a booking for this date as all timeslots are available.</small></div><div class="panel-footer"><a class="btn btn-primary" href="javascript:void(0);" id="addBooking" style="color:#fff;"><i class="fas fa-calendar-plus"></i> Create Booking For This Date.</a></div></div><div class="divider"> </div><div class="divider"> </div><div class="divider"> </div>',
eventClick: function (info) {
//Prevent Default Behaviour.
info.jsEvent.preventDefault();
$.confirm({
theme: 'Modern',
icon: 'fas fa-info-circle',
title: 'Selected Booking Information',
content: '<ul class="list-group list-group-flush" id="assetContent"><li class="list-group-item">Booking Company Name: ' + info.event.extendedProps.companyName + '</li><li class="list-group-item">Booking Date: ' + info.event.start + '</li><li class="list-group-item">Booking Slot: ' + info.event.startTime + ' - ' + info.event.endTime + '</li></ul>',
type: 'blue',
columnClass: 'col-md-6 col-md-offset-3',
buttons: {
close: {
text: 'Close.',
action: function () {
//reset flag and recall the function.
}
}
}
});
}
});
calendar.render();
}
When i have eventRender setup in the code the calendar stops fetching events from my source and it shows the eventSources>failure dialog that i added in the function.
When i remove the eventRender part of the script the calendar object renders perfectly and I am able to see all the events from my database.
Could anybody point out where I am going wrong with the coding?
would really like to get the eventRender part working so i can change the background color of events that are set, also in addition, how would i add in events of my own after the source has fetched the events from the server? I want to do this so I can fill in time slots that are missing in the calendar so the user can select a free slot to create a booking.
Many Thanks
Edit I took out the tool tip code I found in the full calendar docs and replaced it with ui tool tip instead, that is now working. What is the procedure for adding in my own 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);
}
I have the following Full Calender jQuery based code which I want to sent a customer ID to my feed file. The customer ID will let me tailor my feed file to only calender data for this client.
<script type='text/javascript'>
$(document).ready(function() {
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
var calendar = $('#calendar').fullCalendar({
events: {
url: 'myfeed.php?uid=<? echo $UID; ?>',
data: function() { // a function that returns an object
return {
uid: '<? echo $UID; ?>'
};
},
},
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
selectable: true,
selectHelper: true,
async: false,
eventSources: [
// your event source
{
url: 'myfeed.php?uid=<? echo $UID; ?>', // use the `url` property
type: 'POST',
data: {
custom_param1: '<? echo $UID; ?>'
},
color: 'red', // an option!
textColor: 'black' // an option!
}
// any other sources...
],
eventClick: function(calEvent, jsEvent, view) {
$(".caccount").css("display", "block");
}
});
});
</script>
And this is my feed file.
[<?php
//grab all this clients appointments and build the array
if(isset($_GET'uid']) || isset($_POST['uid'])){
$AddedTime = 30 * 60 * 60;
$arr = array(
'id' => '1', 'title' => 'Apples', 'allDay' => false, 'start' => '1393147825', 'end' => '1393199825'
);
echo json_encode($arr);
}?>]
I know this is FullCalender specific, but I know I am doing something wrong. My UID is correctly set to 'aw5nw35nawn5awn5'.
My condition $_GET'uid'] was missing a [
._.