Is there a way to add, specifically, form elements for every day that are distinguishable per day? Below is an example.
I know FullCalendar is built to handle "Events", so from what I can tell in the docs, it's not really possible. But I'm not a Javascript guru either, so would anyone else know of a solution? I'm hoping to not have to reinvent the wheel.
That's an interesting idea which I haven't attempted yet. I don't think there is a callback like onRenderDay(), so you'll probably have to hack it in there. I'd suggest adding your code into the viewDisplay callback. Something like this maybe:
$('#calendar').fullCalendar({
viewDisplay: function(view) {
$("#calendar .fc-view-month td").append('<input type="checkbox"/>AM<br>');
}
});
You may need to tweak the selector, perhaps use .fc-grid. You could also customize it to not include <td> elements with a class of .fc-other-month, so that only actual days of the currently viewed month will have the extra content in them and not days from the previous or next month that are in this month's view.
I'm assuming that any events will overlap on top of your content, so this might all be for naught anyway. Unless you aren't going to show events, in which case you could probably solve this better without fullcalendar.
Also, your image looks like you want just a single week to show. I don't thin that is possible with fullcalendar. Besides, if that is what you want, there would be much simpler ways to do it than using fullcalendar.
Good luck!
Related
I am using fullcalendar.js plugin and I believe it is great and fills my needs, except one feature that I need. This feature is to disable (better - hide, not display at all) arbitrary (custom) days from (at least) agendaWeek view. Now, I can only disable specific weekDays with hiddenDays option.
During research about it, I have only found this topic:
Setting Custom hiddenDays in Full Calendar
Which does not help me (it does not work, only disables (not "deletes, hides") days in month view.
Similar feature has been requested, but no response. https://github.com/fullcalendar/fullcalendar/issues/3130
So my question is, is there any way to achieve this? Either by hacking the JS code, or somehow modifying CSS with display: none? If so, which parts of the code I should look at and how, that could be modified to achieve my goal?
If anyone would have any idea I would be very grateful. Also I believe this feature could be useful for more people.
Thank you.
In this particular case some of the popover functionality needs to be adapted to our particular needs.
The change itself is quite trivial, it's a modification to this function.
I just need to add another placement, but now I'm not exactly sure how to approach this.
One way would be adding a line to the bootstrap.js file in my repository, that works that has the serious disadvantage of having trouble when updating, I may remember now, but the next one to come after me might generate a hard bug to fix.
Another way I've thought of is extending the function but it might not be easy the way bootstrap is setup. As far as I understand since bootstrap functions are preceded with a plus (+function(){}), they're executed immediately and so I can't get in the way of that.
I've tried modifying this function $.fn.tooltip.prototype.getCalculatedOffset but while it does modify it correctly, the modified one never gets called since it's only called once.
It might be possible but I think the complications of this, outweighs how trivial the fix is (Unless I'm missing a more obvious approach).
Another idea would be forking bootstrap, but I'm not sure what would that accomplish, in the end I'm back with the same problem.
What's the most normal way to approach this? What are the best practices?
Similar to the other answer but using the pop over function, just had to catch the right function!
$.fn.popover.Constructor.prototype.getCalculatedOffse
http://jsfiddle.net/59Er7/3/
A reference is saved to Tooltip as $.fn.tooltip.Constructor in line 1472:
$.fn.tooltip.Constructor = Tooltip
Modifying $.fn.tooltip.Constructor.prototype.getCalculatedOffset (of course not in the original file, but somewhere in your code) should affect the original Tooltip, which is "instantiated" in $.fn.tooltip.
I don't know whether this is best practice, but should work.
jsFiddle Demo
Say I have a third party Twitter widget on a page which keeps updating whenever there is a new tweet. Is there some way to figure out when a new div has been added to this widget? Is there an event or something I can hook onto (on maybe the widgets parent div)?
If there isn't, how do I do this? Maybe hook onto the ajax calls the widget is making? How do I do that? It seems possible as firebug seems to be doing this but I can't tell how.
If you're using any kind of modern browser, you can use the DOM Mutation Events to listen for node changes. From the description of your question you're probably looking for DOMNodeInserted. If you must you can use a horrible setTimeout() hack, but in general it's better to wait for events than spin around waiting for something to happen.
Heck here is some example code because I am bored:
var widget = document.getElementById('mywidget');
widget.addEventListener('DOMNodeInserted', function (e) {
if (e.target.nodeName !== 'DIV') return;
// do some other code here
}, false);
Don't ktow if this is a good solution but you can periodicaly compare content of this div.
Giving the simplest answer first: I would suggest checking if the div exists after a second (time depending on many factors - I'm sure you understand the time specifics for your site). When adding a new element (such as your twitter widget) it's important to understand that each element (in your case, "a widget") comes with certain specifications which can have major differences compared to similar (on the surface similar) "widgets"
For a short answer: "It depends on the third party widget"
For the medium answer: "If you can look at how the widget is created, you can probably find a way to 'talk to it'"
For the longer answer: "It's actually not very difficult to create something to communicate with Twitter, so if that's what you want to learn I would suggest being more specific."
Hope SOMETHING OF THIS HELPS...
edit: Knowing nothing about the widget, I would probably set an interval to make requests from client to server, either by using javascript:setInterval() or setTimeout()... If I had time/resources, I would prefer a solution where you understand both Twitter and the widget though (saves time in the future if you want to think about what you've done)...
I am looking for some kind of example of a Javascript Time Picker that is similar to the one used in Windows to pick the time...well except with out the seconds being in their. I have a mockup in place at the moment but trying to figure out how some of the user functionality should be be as it is two inputs and a dropdown. I guess I just am not happy with it at this point.
Thanks ahead of time for any help
There are a number of jQuery plugins that you can use for the perfect looking time picker control.
Here is a good one: http://plugins.jquery.com/project/timepicker
The Windows time picker (if you're referring to the one to change the system clock) is basically just a masked edit text box. If you're looking for something similar, you just need some JavaScript to do masked edits, like this one:
http://digitalbush.com/projects/masked-input-plugin/
To make it specifically for time, you should be able to easily add logic to ensure the hours don't go over 12 (or 24), and the minutes don't go over 59.
Personally, I prefer the way Google Calendar does time selections. There is a jQuery plugin for this which can be found here:
http://labs.perifer.se/timedatepicker/
Here's a cool one.
http://www.java2s.com/Code/JavaScript/GUI-Components/FancyTimePicker.htm
An online example of the control is posted here.
Like Dan said, if you are looking for a masked text input and if you want to use the PrototypsJS framework, there is http://code.google.com/p/phenx-web/ .
And if you want a good date/time picker, you could use this : http://home.jongsma.org/software/js/datepicker (also PrototypeJS). I'm currently working on it with Jerermy Jongsma to add more features.
I'm pretty fond of the jQuery stuff, There is a fairly nice one here.
I ended up creating a prototype time picker that for the time being is less fancy than a lot of the others out there. It shows up a regular input until you click on it then it shows a dropdown that has times in it.
I can share the code if anyone is interested
A timepicker shouldn't slow down the user's interaction, should be pretty straightforward without having to play with it for a while, and should be keyboard-accessible for users who can't manipulate a mouse. The time-picking functionality provided by the Any+Time™ Datepicker/Timepicker AJAX Calendar Widget with TimeZone Support meets all of these design goals, supports countless date/time formats and is easy to customize using CSS or jQuery UI.
A good test of timepicker usability is to think of an odd time (say, 10:32pm) and then see how long it takes to accurately select that time using various time pickers. You can probably do it with Any+Time™ faster than you can even write out the time by hand... how's that for speed and ease of use? :-p
I'm having some difficulties creating a javascript appointment style calendar. While it does render, I know there's go to be a much more efficient way of doing it. Does anyone have a pattern they use for creating calendars? I will be using jQuery, but I don't want to use someone's calendar plugin as a) I haven't found one that works for what I need and b) I'm never going to get any better by using someone elses work.
Now, keep in mind my question is not about loading data in or getting repeat occurances or anything like that. I'm basically needing to know a good pattern on actually rendering the calendar markup.
Ive just published a new OS project called FullCalendar (http://arshaw.com/fullcalendar/)
Sounds like what you might want. Pass it an array of events/appointments and it will render. The plugin only provides the essentials, but you can use event hooks to extend it.
Start with the date.js library, why reinvent things like figuring out the name of the day of the week, leap years and things like that. Build your own visualization on top of it.
There are a lot of gotchas associated with developing a calendar control from scratch. Since you're already using jQuery, I would recommend customizing a solution such as jCalendar and create your own wrapper such as the one described here
I think that taking someone elses work is your best bet. why reinvent the wheel?
You can atleast take the part that figures out what are the days of that month in that year, and which of those days are weekends. I dont think you should waste your time trying to figure out that.
i had to do this once, albeit, it was just a mockup implementation, and i used someones work see:
http://kpmm.doesthatevencompile.com/calendar.htm?p=5.1.2.1
i added some stuff but not much. i think that calendar renders cleanly and nicely.
good luck
Calendars are very tricky beasts and Javascript's Date() object leaves a lot to be desired and I wouldn't even want to attempt it without date.js.
You have to be aware of JS Date() (being the user's current Timezone) vs Server Date/Time and JS's epoch and all kinds of silly stuff.
I've written calendars in the past and won't do it these days because of the effort involved, but it is a good learning experience.
If you have to fall back to someone else's calendar, I would suggest jQuery UI's
http://jqueryui.com/demos/datepicker/