select: function(start, end, allDay) {
var title = prompt('Event Title:');
if (title) {
calendar.fullCalendar('renderEvent',
{
title: title,
start: start,
end: end,
allDay: allDay
},
true // make the event "stick"
);
}
calendar.fullCalendar('unselect');
},
I can select a date(period) only if I enter a title.
How can I fix this so that I can enter an event without title?
Note: Fullcalendar from arshaw.com/fullcalendar/
I have this someone may find usefull for example y have a dialog with 2 inputs and a create button (html) i wanna input title and other info, took me a while to figure out uuuuf it wooooorks be thankfull for my genius hehe:)
select: function(start, end, allDay) {
$('#mydialog').dialog('open'); // open the dialog you must have a div defined with 2 or more inputs
$("#create").bind("click", { start: start, end: end,allDay: allDay }, function(event){ // when you click in a create button inside dialog you should send as parameters start,end,etc
$input1 = $("#input1").val();
$title = $("#input2").val();
if ($title) {
$mycalendar.fullCalendar('renderEvent',
{
id: $id, // CORREGIR obtener el ultimo id
title: $title,
start: start,
end: end,
allDay: allDay,
url: $url
},
true // make the event "stick"
);
}else{
$mycalendar.fullCalendar('unselect');
}
$('#mydialog').dialog('close');// close my dialog
});
},
You could go for a html popup and a callback method to store the value instead of javascript prompt, that gives you much more controll over layout and more.
Related
I'm using fullcalendar v2 and the sources of the events are selectable from an ul-li menu. The initial call uses the link from the first li and I may navigate through all the months in the calendar. When I use the second link, fullcalendar retrieves the events from the previous link as well as the new link. On each new select, fullcalendar remember the event sources. How can I disable this? Here my code:
$("#chgBranch li").on("click", function (event) {
event.preventDefault(); // To prevent following the link (optional)
var urlEvents = $(this).children('a').attr('href');
var branchName = $(this).children('a').text();
$('#calendarSchedules').fullCalendar('removeEvents');
$('#calendarSchedules').fullCalendar('removeEventSource');
// refill calendar
fillEvents(urlEvents, branchName);
});
function fillEvents(urlEvents, branchName) {
// change title of potlet box
var newTitle = '<i class="fa fa-calendar"></i> Available schedules for: ' + branchName;
$('#calendarCaption').html(newTitle);
$('#calendarSchedules').fullCalendar({
year: <?= $yy ?>,
month: <?= --$mm ?>, // javascript month is 0 based
date: 1,
header: {
left: '',
center: 'title',
right: 'prev,next,today'
},
defaultView: 'month',
firstDay: 1, // monday
editable: false,
slotEventOverlap: false,
selectable: true,
selectHelper: true,
dayRender: function (view, element) {
$('.fc td.fc-sun').css('background', '#E7EFEF');
$('.fc td.fc-sat').css('background', '#E7EFEF');
},
eventClick: function (event) {
$('#dueTime').show();
$('#duedate').val(moment(event.start).format('YYYY-MM-DD'));
$('#duetime').val(moment(event.start).format('HH:mm:ss'));
$('#isPartitionable').val(event.partitionable); // user clicked on partitionable dispo or not
}
});
$('#calendarSchedules').fullCalendar('addEventSource', urlEvents);
}
// load first branch item
$('#chgBranch li a:first').trigger('click');
I think you should destroy your calendar also. Because you are initializing fullcalendar every tine on sources change from ul-li.
Try below one.
$("#chgBranch li").on("click", function (event) {
event.preventDefault(); // To prevent following the link (optional)
var urlEvents = $(this).children('a').attr('href');
var branchName = $(this).children('a').text();
$('#calendarCaption').fullCalendar( 'destroy' );
// refill calendar
fillEvents(urlEvents, branchName);
});
This will work for sure. I tried locally and works fine.
I tried it with following method which also works fine, but #Chintan method is also fine:
$('#calendarSchedules').fullCalendar('removeEvents');
$('#calendarSchedules').fullCalendar('removeEventSource', storedEventSource);
And I store the event source in a hidden field once the calendar rendered.
Im working in symfony2.5 framework.
In my app, i have a calendar page implemented with full calendar.js jquery plugin. (http://fullcalendar.io/).
I have a event table with records of employees' events.
How to display these events in the calendar page.
my calendar page's js:
$( '.calendar' ).fullCalendar({
header: {
left: 'prev,next,today',
center: 'title,',
right: 'month,agendaWeek,agendaDay'
}
});
Can anyone help me? Thanks in Advance!
First you have to parse your events as fullCalendar event object, following event documentation
var myEvent = {id: 1, title: 'myTitle', start: moment(...)}
Then, you should add those events to an array, function, json...
var mySourceEvents = [myEvent, myOtherEvent];
Finally you could set that array in your fullcalendar config as a source.
$('#calendar').fullCalendar({
eventSources: [
mySourceEvents
]
});
Or... You could add your events directly as an array:
$('#calendar').fullCalendar({
events: [
{
title : 'event1',
start : '2010-01-01'
},
{
title : 'event2',
start : '2010-01-05',
end : '2010-01-07'
},
{
title : 'event3',
start : '2010-01-09T12:30:00',
allDay : false // will make the time show
}
]
});
I want to show a confirmation box include 4 options: Yes/No/Yes to All/No to All after user click a button in my aspx page. I have seen a lot of sample but it only contain Yes/No option. Please show me the way to do that.
There's no native javascript function for that (I guess you saw samples that are using confirm function).
Give a try to a javascript library, that create pseudo dialog.
One of the most used is JQueryUI. Especially, look at the Dialog confirmation sample, and you'll ends with something like:
<script>
$(function() {
$( "#dialog-confirm" ).dialog({
resizable: false,
height:140,
modal: true,
buttons: {
"Yes": function() {
// Handler for Yes
},
"No": function() {
// Handler for No
},
"Yes to all": function() {
// Handler for Yes to all
},
"No to all": function() {
// Handler for no to all
}
}
});
});
</script>
I have created a jquery fullcalendar, pulling the feed from a google calendar and would like to open the event details in a colorbox. So far, I am completely lost as to how to achieve this and am looking for help. Everything that I have tried so far causes the calendar not to appear at all, so there is clearly a problem. Here is the latest code that I have tried:
<script>
$(document).ready(function() {
$('#calendar').fullCalendar({
events: {
url: 'my feed url'
}
eventAfterRender: function(event, element, view ) {
if(event.url) {
$('a',$(element)).colorbox({
type: 'ajax'
});
}
}
})
});
</script>
I don't think I completely understand what's going on with fullcalendar's event information; so if someone can provide a working code that I can mess with, I would appreciate it. Thanks very much in advance for any help!
Simply add the eventClick property when initializing the fullcalendar object and call colorbox within,
$('#calendar').fullCalendar({
editable: true,
eventClick: function(calEvent, jsEvent, view) {
$.colorbox({html:"<h1>"+calEvent.title+"</h1><br><p>"+calEvent.start+" TO "+calEvent.end+"</p>"});
},
events: [
{
title: 'All Day Event',
start: new Date(y, m, 1)
},
{
title: 'Long Event',
start: new Date(y, m, d-5),
end: new Date(y, m, d-2)
}
]
});
This is a very basic example. You can expand on it as per your requirements. Hope it helps.
I use jQuery fullCalendar (http://arshaw.com/fullcalendar/docs/selection/unselectAuto/)
I use Selectable version of this calendar (http://arshaw.com/js/fullcalendar/demos/selectable.html)
It's working fine however I want to cancel/delete my old selections if I continue selecting new dates.
Lets say I chose 1 Jan and gave a title to it.
When I try to select 2 Jan, I want to see only 2 Jan selection.
I thought unselectAuto is for this but I couldnt manage to make it work :(
Any ideas?
I used unselectAuto right under
selectable: true,
unselectAuto: true,
First it's still necessary to use the $('#yourCalendar').fullCalendar('unselect'); function.
The second thing that I needed to do, was to specify how the unselect callback was going to behave (when setting up the fullcalendar options). For me I had to unbind the submit button from my form
unselect: function(){
$('#submitButton').unbind();
},
It worked great!
I was able to reach this conclusion after reading this post "multiple events created"
u can try this way, this works for me :)
var liveDate = new Date(); // current Date
var calendar = $('#calendar').fullCalendar({
select: function (startDate, endDate) {
if (liveDate > startDate) {
alert('Selected date has been passed');
return false;
} else {
//do your wish
}
calendar.fullCalendar('unselect');
}
});
Had the same problem but my user was interfacing directly with the calendar and multiple events were being generated. ie. not through a form with a button and therefore nothing to "unbind" as many of the previous solutions.
To only allow one selection and to clear previous submissions I changed the select function as follows:
select: function(start, end) {
var title = "Desired Booking";
var eventData;
eventData = {
title: title,
start: start,
end: end
};
$('#calendar').fullCalendar('renderEvent', eventData, true); },
select: function(start, end) {
$('#calendar').fullCalendar('removeEvents');
$('#calendar').fullCalendar('rerenderEvents')
var title = "Desired Booking";
var eventData;
eventData = {
title: title,
start: start,
end: end
};
$('#calendar').fullCalendar('renderEvent', eventData, true); },
This did the trick for me.
I had problems with unselectAuto also. Sometimes it would unselect when I didn't want it to, and sometimes it would NOT unselect when I DID want it to. My solution was to manually trigger the unselect method.
Here's how to unselect all currently selected:
$('#yourCalendar').fullCalendar('unselect');
You can put this line of code inside custom jQuery events that you bind outside of the plugin. You can also include it in fullCalendar callbacks, etc...
Hope this helps.
Scott
Here is an exemple of Version 5 doing the unselect
You could do it by :
const calendarApi = selectInfo.view.calendar;
calendarApi.unselect(); // clear date selection
Use this code
$('#trainings_modal').on('hidden', function () {
$('#trainings_modal *').unbind(); // Unbind all events
});
Unbind on hide form with any method (i.e esc press, or out key)