I have a list of event days. When I click on the event in the list I want to fire the same action like I click on calendar. My eventClick function:
eventClick: function(calEvent, jsEvent, view) {
openEvent(calEvent);
}
Try this. Assign some id to your event. Then, in eventRender event, add this id to the event div. Note there is also eventClick handler present:
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek,basicDay'
},
defaultDate: '2016-09-12',
navLinks: true, // can click day/week names to navigate views
editable: true,
eventLimit: true, // allow "more" link when too many events
events: [
{
title: 'Meeting',
start: '2016-09-12T10:30:00',
end: '2016-09-12T12:30:00',
id: "1234"
}
],
eventRender: function (event, element, view) {
element.find('.fc-content').attr("id", "event-" + event.id);
},
eventClick: function (event, jsEvent, view) {
alert(event.id);
},
});
Then call this after your events list click:
$('#event-1234.fc-content').trigger('click');
You can try it here:
http://jsbin.com/fejifovuxo/edit?js,output
Related
The answer at Fullcalendar event's end time is missing is for an older version of fullcalendar. It's not the answer I want.
In my fullcalendar application, when I create a "half-an-hour" event it just show only event start time and title at week view.
For one hour and longer events, there are no problems I encounter. It only happens at "half-an-hour" events. So, I don't know if this is a feature or not.
I want my events to be displayed like "08:00 - 08:30" (start - end) even for half an hour events.
My code:
var calendar = $('#calendar').fullCalendar({
allDaySlot: false,
eventOverlap: false,
selectOverlap: false,
editable: false,
eventStartEditable: false,
eventDurationEditable: false,
timezone: 'local',
timeFormat: "HH:mm",
minTime: "08:00:00",
maxTime: "20:00:00",
header: header,
selectable: true,
selectHelper: false,
defaultView: "agendaWeek",
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay,listMonth'
},
view: {
agendaWeek: {
columnFormat: "M/D [(]ddd[)]"
}
},
select: function(start, end, allDay) {
...
}
eventClick: function(calEvent, jsEvent, view) {
...
}
});
ScreenShot (SS):
Note: Sometimes even event titles cannot be seen in the week view of Fullcalendar.
I have this fullcalendar:
$('#calendar').fullCalendar({
height: 700,
locale: 'es',
header: {
left: 'prev,next, month basicWeek today',
center: 'title',
right: ''
},
buttonText: {
today: 'Hoy',
month: 'Mes',
week: 'Semana'
},
editable: true,
weekends: true,
droppable: true, // this allows things to be dropped onto the calendar
dragRevertDuration: 0,
events: $scope.events,
drop: function(date, jsEvent, ui, resourceId) {
console.log("DROP!")
}
});
I would like in drop event, get data of this day.
I drag event and drop in day 1, that it has an event called "Carmen Donoso | BAJA", and when I drop it I would like to get this event.
Thanks
I am working on a project where users create appointments using fullcalendar. Users can only create appointments on those timeslots(30min) that are available. These events are coming from a file named as events_json.php. i am including this file in like this
$(document).ready(function() {
$myCalendar = $('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'agendaWeek,agendaDay'
},
theme: true,
selectable: true,
selectHelper: true,
height: 500,
events: 'JSON/events_json.php',
select: function(start, end, allDay) {
//$('#eventStart').datepicker("setDate", new Date(start));
/*$('#eventStart').datepicker({
dateFormat: 'dd-mm-yy'
},new Date(start));
$('#eventEnd').datepicker({
dateFormat: 'dd-mm-yy'
},new Date(end));*/
$('#calEventDialog').dialog('open');
},
editable: false
});
Now the events are showing but i don't want to show the user that, user should only see the time-slots as disabled and the free time-slots as links with title as "Book".
I found the renderEvent in documentation but couldn't get around it.
EDIT 1
The events_json.php is sending events like this
The file is sending events like this,
$output_arrays = array(array("title"=>"Happy Hour", "start"=>"2016-01-13T07:00:00-05:00"),
array("title"=>"Click for Google", "start"=> "2016-09-02")
);
echo json_encode($output_arrays);
In order to show existing events as "taken", you can handle the eventDataTransform event.
$(document).ready(function() {
$myCalendar = $('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'agendaWeek,agendaDay'
},
theme: true,
selectable: true,
selectHelper: true,
height: 500,
events: 'JSON/events_json.php',
eventDataTransform: function(event) //this is called once for each event returned in the JSON
{
event.title = "Taken";
return event;
},
select: function(start, end, allDay) {
//$('#eventStart').datepicker("setDate", new Date(start));
/*$('#eventStart').datepicker({
dateFormat: 'dd-mm-yy'
},new Date(start));
$('#eventEnd').datepicker({
dateFormat: 'dd-mm-yy'
},new Date(end));*/
$('#calEventDialog').dialog('open');
},
editable: false
});
N.B. the "eventRender" you mention isn't an event, it's a method you can call to add new events to the calendar on the client-side. That's probably why it didn't help you in this situation. It might be more helpful when you want users to book into a slot - handle the "select" event (as you're doing already) and then use renderEvent to create a new appointment on the calendar. You can control the duration and all other properties of the event that gets added.
I am having a popup form. I have events in fullcalendar page.
I need to pop up this form on click of any event from full calendar.
Have tried full calendar with modal but based on my requirement, i require my pop up form only.I tried with window.open("url"), but it goes to next page.
Here's my code but it need to create a clickable popup.I have added my form through an image below, which shall popup on click of event. kindly acknowledge me asap..
<script>
$(document).ready(function() {
$('#calendar').fullCalendar({
utc: true,
header: {
left: 'prev,next today EventButton',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
editable: true,
droppable: true,
events: [
{
title: 'All Day Event',
start: '2016-07-01',
end: '2016-07-01'
},
{
title: 'Long Event',
start: '2016-07-07',
end: '2016-10-08'
}
],
eventClick: function(event, jsEvent, view) {
console.log(event.id);
window.open("<?php echo base_url() ?>common/calendar/form_calendar");
}
});
});
The calendar doesn't display hours beside .
i have uploaded a picture and put the code to understand the problem more
how can i correct it ?
Code javascript :
$(document).ready(function () {
var date = new Date();
// the code display the calendar
$('#calendar').fullCalendar({
// the header
header:{
left: 'prev,next today',
center: 'title',
right: 'agendaWeek,agendaDay'
},
defaultView: 'agendaWeek',
lang: 'fr',
buttonIcons: false, // show the prev/next text
editable: true, // resize event
eventLimit: true, // allow "more" link when too many events
minTime: '06:00:00',
maxTime: '20:00:00',
eventRender: function (event, element) {
element.find('.fc-title').append(" || " + event.type);
},
dayClick: function (date, jsEvent, view, resourceObj) {
//getting the clicked date from calendar
},
eventClick: function (calEvent) {
// event clicked
},
// events redered in twig template
// I an working with symfony
events:{{ events|raw }}
})
});
thank you very much i'm using fc-time{ display: none;} it's working now