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
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? (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 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 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
});
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 [
._.