I'm currently detecting double click events in month view. This works well:
dayRender: (date, element) => {
element.bind('dblclick', ...)
}
What I'm looking for is a way to do the same when the user is in day view or week view. I want to be able to detect a click event, and get the date and time they clicked on (note that time is relevant in day/week view, but not month view).
Any ideas?
For anyone that finds this in the future, here's the hacky solution I came up with:
Because fullcalendar doesn't render a <div> per time slot (eg. a single div representing 1pm-1:30pm on 1/2/2015), and instead visually represents a single time slot as the intersection of a row and a column, we need a way to figure out the time from a given click. Day info is already attached to each column (day) DOM element in the form of a data-date attribute. What I did was I forked fullcalendar, and added time info to each row (time slot) with a new data-time attribute.
Then, I listened on the double click event onViewRender, figured out the elements the user clicked on, and from those was able to derive both the date and the time slot:
viewRender: (view, element) ->
if view.type in ['agendaDay', 'agendaWeek']
element.on 'dblclick', (event) ->
els = document
.elementsFromPoint event.pageX, event.pageY
.filter (e) -> (e.hasAttribute 'data-date') or (e.hasAttribute 'data-time')
date = (_.find els, (e) -> e.hasAttribute 'data-date').getAttribute 'data-date'
time = (_.find els, (e) -> e.hasAttribute 'data-time').getAttribute 'data-time'
return unless date and time
startTime = moment "#{ date } #{ time }"
endTime = (moment startTime).add 30, 'minutes' # clone + increment
This is a really hacky solution, and mixes all sorts of concerns. However, until fullcalendar adds support for a timeClick event, this works pretty well.
Hope this helps someone else!
Related
I already have start and end time for an external event but is there any correct way to set the end time on highlight (gray background) of the same external event.
Or if there is no way to set the end time on highlight then can we remove the fc-highlight completely from external/draggable events.
By the way, I already asked this question but didn't get correct response, so that's why I'm asking again
For more detail, please visit my another question here: Disable highlight of an external event in fullcalendar
Starting from your CodePen...
I managed to customise the draggable event in order to have a defined duration to be used as time calculation.
I added data-duration-hour and data-duration-minute attributes to the draggable event.
Those "data" attributes ares used to determine the ending time of the event, on drop.
NOW about the hightlight which occurs on drag (before drop) in the calendar...
It still hightlights 2 hours.
You'll have to to look at a function to add on drag in fullCalendar options.
I have no idea for the moment.
So... I may not have answered the right question (about the hightlight effect on drag).
But this is still an improvement for your project.
See in this CodePen
HTML modified:
<div class='fc-event' data-duration-hour="3" data-duration-minute="30">My Event 1</div>
JS modified:
function external_event_dropped(date, external_event) {
var event_object;
var copied_event_object;
var tempDate = new Date(date);
event_object = $(external_event).data('eventObject');
copied_event_object = $.extend({}, event_object);
copied_event_object.start = date;
// This is the dropped date object
console.log(date);
// This is the drop time in clear.
console.log( "dropped at: "+date.hour()+":"+date.minute() );
// Retreive the data-duration from the dragged element.
var durationHour = parseInt(external_event.data("duration-hour"));
var durationMinute = parseInt(external_event.data("duration-minute"));
console.log("DATA: "+durationHour+":"+durationMinute);
// Clone the time object to modify it in order to create de end time.
var dateEnd = date.clone();
dateEnd = dateEnd.hour(dateEnd.hour()+durationHour);
dateEnd = dateEnd.minute(dateEnd.minute()+durationMinute);
// This is the end time object.
console.log(dateEnd);
// This is the drop end time in clear.
console.log( "dropped at: "+dateEnd.hour()+":"+dateEnd.minute() );
// Now set it to the FullCalendar object.
copied_event_object.end = dateEnd;
copied_event_object.allDay = false;
copied_event_object.title = 'ADEEL';
external_event.remove();
$('#exampleCalendar').fullCalendar('renderEvent', copied_event_object, true);
}
For the complete solution check this out: Fullcalendar
External/Draggable Events Highlight
Effect
Well after reading the fullcalendar documentation and spent a lot of time on this issue, I come up with a solution and I hope it might help others as well.
So, the solution is:
I've added an option defaultTimedEventDuration which is a default duration of an external/draggable event, if there is no duration set on event.
e.g: defaultTimedEventDuration: '01:00:00'
Also added data-duration in html to get dynamic duration and highlighted effect.
e.g: <div class='fc-event' data-duration='03:00'>My Event 1</div>
N.B: Also possibility to set duration attribute in js data
I need to allow the user to select a date/time span to create a new event. I have the code that opens the new event when clicking on a day and I can get the date and time selected, but it returns only the start date and time. I don't know how to allow the user to select more than one time/date span, or how to capture the end date/time.
Inside my fullCalendar definition, I have:
dayClick: function (date, allDay, jsEvent, view) {
var startDate = date._d.toISOString();
var dueDate = date._d.toISOString();
startDate = (startDate.substr(5,2)-1)+'/'+startDate.substr(8,2)+'/'+startDate.substr(0,4)+' '+parseInt(startDate.substr(11,2))+':'+startDate.substr(14,2);
dueDate = (dueDate.substr(5,2)-1)+'/'+dueDate.substr(8,2)+'/'+dueDate.substr(0,4)+' '+(parseInt(dueDate.substr(11,2))+1)+':'+dueDate.substr(14,2);
//using alert() in place of my function call
//to open the actual event creation page
alert(startDate+'\n'+endDate);
},
Any ideas of how to allow a multi date/time span and then how to capture the end date/time?
I am creating the calendar where I can drop events from external list.
I took as example this sample - external-dragging.
I want to add specific logic that user can add only one event per day.
So for preventing dropping to 'filled' cell I am trying to use dropAccept method in the next way.
dropAccept: function (item) {
return [my condition];
},
I can get item that I am dropping from item element, I can get calendar's events but I can't get a cell (or a date) where I am putting my item.
How could I get a cell/date where I am dropping item?
Thank you.
I have solved this in another way.
I set all events as all day by default
I forbade an event overlapping
My code is:
$('#calendar').fullCalendar({
allDayDefault: true,
eventOverlap: false,
});
You can use drop function of full calendar.
Here is parameters
function( date, jsEvent, ui ) { }
Enjoy!
I have a question about the bootstrap-datepicker.
When I select a random Date and then open the Popup again and click the same Date, the Input-Field clears. Is there any way to prevent this from happening?
I need this because in my case the Input-Field is not allowed to be empty.
I use Angular, and have a directive defined that inserts this little snip of hacky javascript... you might be able to do something similar:
.on('changeDate', function (ev) {
if (ev.dates && !ev.date && selectedDate)
{
// Fixes bug in bootstrap calendar without multiselect, where picking the same day unselects it
$(this).datepicker('setDate',selectedDate);
}
else if (ev.date && ev.date!=selectedDate) selectedDate = ev.date;
});
By having a variable named "selectedDate" somewhere before the constructor for your datepicker, this additional event handler will store valid dates and strip the bogus deselection. You'll notice the event object passed includes the array "dates" when incorrectly deselected, and only "date" when correctly selected.
I have two calendars and I would like to use them without displaying the last days of the previous month.
How can I get rid of the extra row? I looked into Datepicker's API, but I couldn't find anything that works.
You can get a better view of the probleme here:
I need them to have the same height.
Hiding last days from previous month or next month would not make the height same for these calendars, you need to do some css trick for this.
But if you really need to hide these you can try skipping the events in the eventRender() method:
eventRender: function(event, element, view)
{
if(event.start.getMonth() !== view.start.getMonth()) { return false; }
}