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");
}
});
});
Related
I'm using "fullcalendar" plug- https://fullcalendar.io/ in order to display tours on calendar
when user click next/pre button, how do i ALERT the next/pre full date?
for instant, if the calendar show me the current day (2019-06-03) and i click "next" then alert will display 2019-07-01. clicking "pre" will display 2019-05-01
my code:
<div id="calendar"></div>
<script>
$(document).ready(function() {
var initialLocaleCode = 'en';
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay,listMonth'
},
eventLimit: true,
editable: false,
events: [
{
title: 'tour 1',
start: '2019-05-05',
end: '2019-05-11',
className: 'bg-warning'
},{
title: 'title for tour num 2',
start: '2019-05-19',
end: '2019-05-25',
className: 'bg-purple'
},{
title: '3td tour title',
start: '2019-05-16',
end: '2019-05-21',
className: 'bg-info'
}
]
});
});
</script>
I'm not sure why you'd need to do this, since the new date will already be displayed at the top of your calendar.
However, putting that aside, one way to achieve it is to handle the viewRender event. This will occur anytime either the date range or the type of view is changed on the calendar, and fires just before the new view is actually displayed on the screen. As per the documentation, the view object supplied in the callback contains the the start and end dates which are about to be displayed.
You could write something like this:
viewRender: function( view, element )
{
alert(view.start.format("YYYY-MM-DD"));
}
Here's a working demonstration: http://jsfiddle.net/8bxqzfev/
For example, I want to display a month instead of prev and next arrow. ?I have added the image below.
This is my code,
$('#calendar').fullCalendar({
header: {
left: 'prev',
center: '',
right: 'next'
},
contentHeight: 1050,
columnHeaderFormat: 'dddd',
navLinks: true, // can click day/week names to navigate views
editable: true,
eventLimit: true, // allow "more" link when too many events
events: [
{
title: 'All Day Event',
start: '2018-09-01'
}
]
});
});
Please help me to fix this,
Thanks.
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
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
I am using FullCalendar v2 and bootstrap v3.3.2. I am trying to show a popover inside of the slot where the user click. Here there an example that I try to do http://jsfiddle.net/5g396/ but the problem is that it uses FullCalendar v1 and I need FullCalendar V2.
This is my code, http://jsfiddle.net/beckymo/nmwyz269/, but the popover is only shown in the same position of the Calendar.
My questions is: How to show popover bootstrap v3.3.2. in FullCalendar v2 on the top of slot when the user click? Thanks!
$('#calendar-holder').fullCalendar({
header: {
left: 'prev, next',
center: 'title',
right: 'month, agendaWeek, agendaDay'
},
businessHours: {
start: '09:00',
end: '19:00',
dow: [1, 2, 3, 4, 5]
},
allDaySlot: false,
defaultView: 'agendaWeek',
lazyFetching: true,
firstDay: 1,
selectable: true,
timeFormat: {
agenda: 'h:mmt',
'': 'h:mmt'
},
dayClick: function (date, jsEvent, view) {
$(this).popover({
title: 'haha',
placement: 'right',
content: 'haha',
html: true,
container: 'body'
});
$(this).popover('show');
}
});
Thanks!!!
Firstly you need add the option "selectable: true" because it create a div inside of slot where you click.
Secondly you can use this div as selector (.fc-highlight") for call popover like this:
dayClick: function (date, jsEvent, view) {
$(".fc-highlight").popover({
title: 'haha',
placement: 'right',
content: 'haha',
html: true,
container: 'body'
});
$(".fc-highlight").popover('show');
}