laravel-fullcalendar
laravel-fullcalendar copied to clipboard
maddhatter
How to make click event?
This is my code,
`<!doctype html>
<style>
/* ... */
</style>
when i click the date, why i cannot alert something?
SetCallbacks()
public function getEvents() {
$events = [];
$data = Event::all(); // -->Your Model
if($data->count()){
foreach ($data as $key => $value) {
$events[] = Calendar::event(
$value->title,
false,
new \DateTime($value->start_date),
new \DateTime($value->end_date),
$value->id,
[
'color' => $value->color,
]
);
}
}
$calendar = Calendar::addEvents($events)
->setOptions([
'eventLimit' => 4,
])->setCallbacks([
**//set fullcalendar callback options (will not be JSON encoded)**
'eventClick' => 'function(event) {
title= event.title;
return $calendar;
}
Working one! Remove {!! $calendar->script() !!} and add followings:
$(function() { ; $('#calendar-{{$calendar->getId()}}').fullCalendar({ selectable: true, header: { left: 'prev,next today', center: 'title', right: 'month,agendaWeek,agendaDay' }, dayClick: function(date) { alert('clicked ' + date.format()); }, select: function(startDate, endDate) { alert('selected ' + startDate.format() + ' to ' + endDate.format()); } });
});
The correct way seems to use "->setCallbacks"
For example:
$calendar = \Calendar::addEvents($events)
->setOptions([
'firstDay' => 1,
'editable' => true,
'selectable' => true,
'defaultView' => 'agendaDay',
'minTime' => '05:00:00',
'maxTime' => '22:00:00',
])
->setCallbacks([
'eventClick' => 'function(event) { alert(event.title)}',
]);
This callback will popup the name of the clicked event
hey @jestin-g ! Is it possible to include the js code from another js file instead of keeping it inside php code?
Working one! Remove {!! $calendar->script() !!} and add followings:
$(function() { ; $('#calendar-{{$calendar->getId()}}').fullCalendar({ selectable: true, header: { left: 'prev,next today', center: 'title', right: 'month,agendaWeek,agendaDay' }, dayClick: function(date) { alert('clicked ' + date.format()); }, select: function(startDate, endDate) { alert('selected ' + startDate.format() + ' to ' + endDate.format()); } });
});
Solves my problem. Thank's
