I am building a calendar based on this plugin http://arshaw.com/fullcalendar/
I have added a feature where upon selecting a timeslot a popup window appears with a dropdown menu where the time selected will appear there
just like outlook.com calendar.
I have managed the above by “taking” the HTML segment(which contains the time in numeric format,13:00 for example) of the time slot clicked and “transferring” that to the drop down menu-by selecting a specific value in it.
And here is my problem:
Every numeric value is hold in this element
<div class="fc-event-inner"><div class="fc-event-time">13:00 - 14:00 </div></div>
So, I target fc-event-time to get the time-13:00-14:00 here.
The issue is that when I go to click another timeslot(and subsequently for the popup window to appear) the time that is “grabbed” is of a timeslot already present
in the calendar…and that because all timeslots have the same class/element you see above.
What can I do in such a case?
Anyway here is the js code:
$('#calendar').on('mouseup', '.fc-event-inner', function () {
var timeslot=$('.fc-event-time').html().slice(0,2).replace(":","");//this separates the hours from the minutes
if(timeslot>=10)//no need to know what this conditional does for the moment
{var tslot=$('.fc-event-time').html().slice(0,5).replace(":","");}
else
{var tslot=$('.fc-event-time').html().slice(0,4).replace(":","");}
$('#times').easyDropDown('select',tslot); //this sets the value at the dropdown menu...easyDropDown is a jquery plugin
});