jimfog Posted May 10, 2014 Share Posted May 10, 2014 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}); Link to comment Share on other sites More sharing options...
jimfog Posted May 12, 2014 Author Share Posted May 12, 2014 I will prepare a fiddle example. Link to comment Share on other sites More sharing options...
jimfog Posted May 12, 2014 Author Share Posted May 12, 2014 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 Link to comment Share on other sites More sharing options...
thescientist Posted May 12, 2014 Share Posted May 12, 2014 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(); Link to comment Share on other sites More sharing options...
jimfog Posted May 12, 2014 Author Share Posted May 12, 2014 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. Link to comment Share on other sites More sharing options...
jimfog Posted May 14, 2014 Author Share Posted May 14, 2014 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 Link to comment Share on other sites More sharing options...
thescientist Posted May 14, 2014 Share Posted May 14, 2014 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. Link to comment Share on other sites More sharing options...
jimfog Posted May 14, 2014 Author Share Posted May 14, 2014 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. Link to comment Share on other sites More sharing options...
jimfog Posted May 16, 2014 Author Share Posted May 16, 2014 (edited) 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 Link to comment Share on other sites More sharing options...
jimfog Posted May 21, 2014 Author Share Posted May 21, 2014 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. Link to comment Share on other sites More sharing options...
thescientist Posted May 21, 2014 Share Posted May 21, 2014 nothing happens when i click a cell. Link to comment Share on other sites More sharing options...
jimfog Posted May 21, 2014 Author Share Posted May 21, 2014 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 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now