FullCalendar : How to Add/Edit events without refreshing page - javascript

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'];
}

Related

FullCalendar doesn't render last day of event on calendar

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

How to update the Fullcalendar in my function?

How to update the Fullcalendar in my function? (onClick, onSelect, function(), etc)
example https://codepen.io/liggth/pen/GRgjYqG?editors=1010
document.addEventListener('DOMContentLoaded', function() {
var Calendar = FullCalendar.Calendar;
var calendarEl = document.getElementById('calendar');
var calendar = new Calendar(calendarEl, {
plugins: [ 'interaction', 'dayGrid', 'timeGrid' ],
header: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay'
},
editable: true,
});
calendar.render();
});
function test(){
calendar.refetchEvents();
}
IN this case, I get the error:
Uncaught TypeError: calendar.refetchEvents is not a function
You should add property as dateClick and assign function in it. docs
var calendar;
document.addEventListener('DOMContentLoaded', function() {
var Calendar = FullCalendar.Calendar;
var calendarEl = document.getElementById('calendar');
calendar = new Calendar(calendarEl, {
plugins: [ 'interaction', 'dayGrid', 'timeGrid' ],
header: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay'
},
editable: true,
dateClick: function() {
alert('a day has been clicked!');
}
});
calendar.render();
});
function test() {
calendar.refetchEvents();
}

how to read event fullcalendar with google calendar, and calendar id google save on table

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

JavaScript Array Fill

I have a question regarding the next code, how can I fill the 'events' array dynamically, with a for / while ? ( I can't fill it manually due to the fact that there are a lot of datas )
Thank you
<script>
$(document).ready(function() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek'
},
defaultDate: '2014-12-15',
editable: true,
eventLimit: true, // allow "more" link when too many events
events: [
{
title: 'Test',
start: '2014-12-17'
}
]
});
});
</script>
You can use IIFE (immediately-invoked function expression)
events: (function () {
var events = [];
for (var i = 0; i < 10; i +=1) {
// You can do here anything.
events.push({
title: 'Test' + i,
start: '2014-12-17'
});
}
return events;
})()
You can create an array variable and then use it when you initialize the calendar like so:
var events = [];
for(var i = 0; i < 10; i++) {
events.push({title: 'Test' + i, start: '2014-12-17'});
}
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek'
},
defaultDate: '2014-12-15',
editable: true,
eventLimit: true, // allow "more" link when too many events
events: events
});

Pass GET or POST Information with FullCalender jQuery

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 [
._.

Categories

Resources