timeslot selection

[jimfog]

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 therejust 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

HTML Code:

<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 presentin 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:

Code:

$('#calendar').on('mouseup', '.fc-event-inner', function () {var timeslot=$('.fc-event-time').html().slice(0,2).replace(":","");//this separates the hours from the minutesif(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});

 

[jimfog]

I will prepare a fiddle example.

[jimfog]

I am going to state my problem in simpler terms.

Take a look at this fiddle:

http://jsfiddle.net/fiddlehunt/9wFeX/8/

 

Two timeslots are depicted...both are different and both are contained in classes with the same name.

 

Is there a way when clicking each class(as shown by the js code) the different HTML content is shown-since we are dealing here with 2 different timeslots.

As the code is now it is impossible-the code you see though is of a plugin(see my first post),it is not mine and it would be difficult to hack it.

 

Is there a trick I could do?

Anyway here is the function that prints the timeslots in the calendar...go to line 3962:

http://1drv.ms/1ke2gfe

[thescientist]

I am going to state my problem in simpler terms.

Take a look at this fiddle:

http://jsfiddle.net/fiddlehunt/9wFeX/8/

 

Two timeslots are depicted...both are different and both are contained in classes with the same name.

 

Is there a way when clicking each class(as shown by the js code) the different HTML content is shown-since we are dealing here with 2 different timeslots.

As the code is now it is impossible-the code you see though is of a plugin(see my first post),it is not mine and it would be difficult to hack it.

 

Is there a trick I could do?

Anyway here is the function that prints the timeslots in the calendar...go to line 3962:

http://1drv.ms/1ke2gfe

 

 

var timeslot=$(this).html();

[jimfog]

I cannot believe it was so simple...thanks.

 

I have to proceed now and fully test the code...so I might post again if it is necessary.

[jimfog]

Suppose my code is not enclosed in a function...meaning like this:

var timeslot=$('.fc-event-time').html().slice(0,2).replace(":","");//this separates the hours from the minutesif(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

How am I going to use $this in the above code?

 

I am saying that cause I am having some problems if the above code is contained in a function...as it is depicted in my first post

[thescientist]

it wasn't just simply that it was in a function that made this work, it was that it was the function was an event handler, that made this work, where this was a reference to the element calling the event.

 

It doesn't apply with your new code sample from the looks of it.

[jimfog]

Well... the reason for my last post(regarding this) is the following:

 

With this code I am trying to set the value of 2 dropdown menus-the one is the start of the event and the other is the end-combine:

 $('#timesfrom').easyDropDown('select',tslotfrom);    $('#timesfor').easyDropDown('select',tsloto);//the tslotfrom/tsloto variables are "taken" (by using string methods) from the timeslot selected in the calendar

Here is an image example of a timeslot:

http://1drv.ms/1qDuXd3...in this example tslotfrom=5:00 and tslotto=5:30

 

The problem appears when I select more than half an hour:

http://1drv.ms/1lfT22y ...while tslotto ought to be equal to 6 it remains 5:30.

 

Probably I should give more code but I do not want to overwhelm you and see if we can find a solution

with the facts given so far.

It is a matter of correct js coding I believe.

[jimfog]

I am preparing a fiddle to demonstrate the problem....

 

There is one small issue though....in order to demonstrate the problem I need this plugin here https://github.com/patrickkunka/easydropdown

 

js fiddler-when working with external files/resources,these must be placed in a CDN....the js file that is required for the above plugin to work is not located in any cdn.

 

What can I do in such a case?

 

This is the file here....https://github.com/patrickkunka/easydropdown/tree/master/src

 

How can I add it to fiddle?

Edited May 16, 2014 by jimfog

[jimfog]

Go and see this fiddle http://jsfiddle.net/fiddlehunt/ZVxuL/ .It uses $this as you proposed.There are some issues to mention.

 

I am going to refer only to one now.

 

Go to the select function....in the js code.

My problem is the following:

 

If you click a cell in the calendar(in weekview, forget month view for now...) a dialog box appear with the time selected depicted in the dropdown menus.

The cell is comprised of this html:

<div class="fc-event-inner"><div class="fc-event-time">4:00 - 4:30</div><div class="fc-event-title"></div></div>

The problem is that when clicking the cell I must specifically target the fc-event-time div element(as the js code demonstrates) or else the dialog

box does not appear-when targeting for example with the mouse cursor fc-event-inner.

 

How can I fix this and still retain $this(as it solves the problem I mention above) in my code?

You must see with your eyes the problem to understand what I mean. Just go the fiddle.

[thescientist]

nothing happens when i click a cell.

[jimfog]

Did you go to weekview?

 

See these two images:

This show where should you place the cursor http://1drv.ms/1jtgU4A...for the dialog to appear.

 

And here is the dialog that appears so you can know what to expect. http://1drv.ms/1c1AC6x