We Keep Coding

Pass another parameter to Fulcalendar

Here is the code, the "events: url," part of the code is coming through into my fullcalendar.js file and adds the events however I also want to add a list of users from json data like so users:'urlusers'
Will I have to edit the fullcalendar.js file and if so where can I add another parameter for the users.
$(document).ready(function() {
var calendar = $('#calendar').fullCalendar({
defaultView: 'agendaWeek',
minTime: "08:00:00",
maxTime: "20:00:00",
editable:false,
header:{
left:'prev,next today',
center:'title',
},
events: 'https://events.com/eventsjson',
users:'https://events.com/usersjson',
selectable:true,
selectHelper:true,
select: function(start, end, allDay)
{
var titlestart = $.fullCalendar.formatDate(start, "DD-MM-Y HH:mm:ss");
var r = confirm("Request Time " + titlestart);
if (r == true) {
event.preventDefault();
//Open dialog
var subject = 'Booking '+titlestart;
var emailBody = 'Create booking for '+titlestart
showDialog(titlestart);
} else {
}
},
});
});

Not the solution I was thinking of but got the result.
on the events: 'https://events.com/eventsjson', I needed to add more data to the JSON then the fullcalendar sorted the rest out for me
foreach($result as $row)
{
$data[] = array(
'id' => $row["user_id"],
'start' => $row["startevent"],
'end' => $row["endevent"],
'backgroundColor' => $row["backgroundColor"],
'borderColor' => $row["borderColor"]
);
}

How to get the start and end time to full calendar

I need to get the start time and the end time of the even I have saved in the database,
I was able to get the start date and end date from the start_date & end_date fields from the database and display it in the full calendar as shown in the below image
But I need to get the times too from the database from the fields start_time & end_time
Here's how my database fields looks like
I just need to know how can I display the time range as the date range here
Here's my scripts
<script>
$(document).ready(function() {
$(".dashbord-body").removeClass("bg-white");
});
$(function() {
$('#calendar').fullCalendar({
selectable:true,
height:650,
showNonCurrentDates:false,
editable:false,
defaultView:'month',
yearColumns: 3,
header: {
left: 'prev,next', //note no "buttons
center: 'title',
right: 'year,agendaDay,agendaWeek,month,timelineCustom'
},
eventSources: [
{
url: '/calendar', // use the `url` property
color: 'red', // an option!
textColor: 'white', // an option!
}
],
eventDataTransform: function(eventData) {
return {
title: eventData.name,
start: eventData.start_date,
end: eventData.end_date
}
},
});
});
</script>
HTML
<div id='calendar'></div>
Controller function
public function calendar()
{
$calendar= Event::latest()->get();
return response()->json($calendar);
}

I was able to fix the issue I faced here by below codes in my controller function
public function calendar(Job $job)
{
$user = auth()->user();
$calendar = $job->where('user_id',$user->id)->get();
$calendar = $calendar->map(function ($post) {
$post['start'] = $post->start_date . ' ' . $post->start_time;
$post['end'] = $post->end_date . ' ' . $post->end_time;
// unset($post['name']);
return $post;
});
return response()->json($calendar);
}
And added the extra field name to the Model as below code
protected $visible = ['start','end'];

Fullcalander.js Delete an event with google a.p.i calendar

I am using FullCalendar library to load events in my calendar from Google Calendars. And the Calendar does display the events, but now I want to be able to delete/remove an event that sync with the google calendar. I am looking couple of days now how to do it, but can’t find the answer.
(I know there a couple of people who had the same problem but it doesn’t work for me)
I hope someone can help me find the solution.
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
plugins: [ 'interaction', 'dayGrid', 'timeGrid', 'list', 'bootstrap', 'googleCalendar'],
customButtons: {
myCustomButton: {
text: 'custom!',
click: function() {
alert('clicked the custom button!');
}
}
},
header: { right: 'prev,next today,list,dayGridDay,timeGridWeek,dayGridMonth', left: 'prev,next today myCustomButton' }, // buttons for switching between views
defaultView: 'timeGridWeek',
themeSystem: 'bootstrap',
editable: true,
eventLimit: true,
eventRender: function(eventObj, el) {
},
// Showing events
events: {!! json_encode($events) !!},
});
calendar.render();
});
This is how I load the events:
$request->validate([ 'calendar_id' => 'required', ]);
$gclient = new Gclient; $client = $gclient->client();
$cal = Calendar::find($request['calendar_id']);
$client->setAccessToken($cal->gmail->token);
$gcal_id = isset($cal->calendar_id) ? $cal->calendar_id : env('GOOGLE_DEFAULT');
$g_cal = new \Google_Service_Calendar($client);
$eventlist = $g_cal->events->listEvents($gcal_id)->getItems();
$events = [];
foreach ($eventlist as $event) {
if ($event->summary == NULL ) {
if ($event->location == NULL ) {
$title = 'default';
}
else {
$title = $event->location;
}
}
else {
$title = $event->summary;
}
$events[] = [
'title' => $title,
'start' => $event->start->dateTime,
'end' => $event->end->dateTime,
'id' => $event->id
];
}

How to update or delete fullCalendar Event with Symfony

I dont know how update or delete fullcalendar events on my symfony project.
To add a new event, i open a modal window with a form to submit a new event and insert it in my database.
This is my controler(it work fine):
$datas = array();
$form = $this->createFormBuilder($datas)
->add('title', TextType::class)
->add('startDate', TextType::class, array(
'attr'=> array('class' => 'dateTimePicker')))
->add('endDate', TextType::class, array(
'attr'=> array('class' => 'dateTimePicker')))
->add('backgroundColor', ChoiceType::class, array('choices' => $color ))
->getForm();
$form->handleRequest($request);
/** Création d'un nouvel évenement */
if ($form->isSubmitted() && $form->isValid()) {
$title = $form->get('title')->getData();
$start = new \DateTime($form->get('startDate')->getData());
$end = new \DateTime($form->get('endDate')->getData());
$backgroundColor = $form->get('backgroundColor')->getData();
$event = new CalendarEvent();
$event->setTitle($title);
$event->setStartDate($start);
$event->setEndDate($end);
$event->setBackgroundColor($backgroundColor);
$em = $this->getDoctrine()->getManager();
$em->persist($event);
$em->flush();
return $this->redirect($this->generateUrl('ma_lrm_accueil'));
}
I know that to update events, i have to have a javascript like this:
$(document).ready(function() {
$('#calendar').fullCalendar({
header: {
left: 'prev, next',
center: 'title',
right: 'month, agendaWeek, agendaDay'
},
timezone: ('Europe/London'),
businessHours: {
start: '09:00',
end: '18:30',
dow: [1, 2, 3, 4, 5]
},
allDaySlot: true,
defaultView: 'agendaWeek',
lazyFetching: true,
firstDay: 1,
selectable: true,
/*timeFormat: {
agenda: 'h:mmt',
'': 'h:mmt'
},*/
editable: true,
eventDurationEditable: true,
events: 'http://localhost/ligne_rh/web/app_dev.php/admin/accueil/calendar',
eventResize: function(events) {
console.log("Entrée dans : eventResize");
var start1 = events.start.format('Y-m-d\TH:i:s');
var end1 = events.end.format('Y-m-d\TH:i:s');
var xhr = $.ajax({
type: "POST",
url: 'http://localhost/.../calendar/event/update',
data: 'title=' + events.title + '&start=' + start1 + '&end=' + end1 + '&id=' + events.id,
dataType: 'html',
success: function(data) {
window.location.reload(true);
},
error: function() {
alert("...");
},
});
},
});
I dont understand any of it and i have no idea what my controler should look like.
Please HELP ME with an example!! I am novice!! thank you!!!!

You should use
$em->merge($event);
for updating already existing entity and
$em->remove($event);
for removing entity.
Also maybe you should try to create different controller actions(eventDeleteAction, eventCreateAction) to make CRUD operations.

Hi you can use https://github.com/tattali/CalendarBundle the documentation explain how to link the calendar to a CRUD to allow create, update and delete events

jQuery/JS – Outputting objects inside an array – best practice

Need some advice. I am using a jQuery calendar plugin (which seems to be rare!) and it is completely initialised with JS. No HTML.
To add events, you have to write each event as an object inside an array:
events: [
{
title: "Title of event",
start: {
date: YYYYMMDD or "YYYYMMDD", // "20131230"
time: "HH.MM" // "12.00"
},
end: {
date: YYYYMMDD or "YYYYMMDD", // "20131230"
time: "HH.MM" // "20.00"
}
},
{
title: "Title of event",
start: {
date: YYYYMMDD or "YYYYMMDD", // "20131230"
time: "HH.MM" // "12.00"
},
end: {
date: YYYYMMDD or "YYYYMMDD", // "20131230"
time: "HH.MM" // "20.00"
}
}
],
I am using Django, and would need to write a for loop for each event into this format. So, my question is, what's the best way to do this? JSON? Is this possible? What is best practice to output data as JS objects?
Thanks in advance,
R

As required by #rdck, below is an example how it can be achieved :
Server side (PHP example) :
<?php
$arr = array();
$arr[] = array(
'title'=>'Title of event',
'start' => array(
'date'=>'YYYYMMDD',
'time'=>'HH.MM'
),
'end' => array(
'date'=>'YYYYMMDD',
'time'=>'HH.MM'
),
);
$arr[] = array(
'title'=>'Title of event2',
'start' => array(
'date'=>'YYYYMMDD',
'time'=>'HH.MM'
),
'end' => array(
'date'=>'YYYYMMDD',
'time'=>'HH.MM'
),
);
?>
In HTML
<script type="text/javascript">
var events = '<?php echo json_encode($arr); ?>';
</script>
events is your json object which you can pass directly into your events calendar

I think, best way to do this - is AJAX-request.
But you can add json-string to context-dict and render it in template:
<script type="text/javascript">var events = {{ json_data }};</script>