My take (so far) on a jQ calendar

[jscheuer1]

I plan on submitting this soon as a script to the DD library. For now it's sort of a beta (and even all on one page - soon the main script will be an external file). The code and styles are well commented, but there's more to it than that (more complete documentation will be coming soon). I also have some plans for it (optional server side connections, and optional zoom in on a month and/or a day features, as well as improving its current pop up info box, and expanding options for configured dates). In it's current form though it's just a fairly versatile (look, feel, configurable highlighted dates with info, and language are all highly configurable) and lightweight jQuery calendar plug in. Creditware (like most DD scripts), so anyone who needs something like this might already be able to use it. (Thanks to both Beverley and a recent poster for getting me thinking 'calendar' again in a more earnest manner.) Demo:

http://jscheuer1.com/demos/tidbits/time/jqcal.htm

The demo (which currently includes both a 'year at a glance' view as well as a single month view below that), linked to above will probably be being updated as time goes on.

Any comments, questions, criticisms, etc. are quite welcome.

[ajfmrf]

looks like a good calander.Waiting on more..............

[Beverleyh]

I have woken up to a lovely compliment there John - it always feels good to water the bud of inspiration in others

Nice work on the jQ calendar! I'm still sat in bed at the mo but will be viewing the source from my desk tomorrow

I'm curious to see how you will implement/style a day with multiple events (a number in a circle maybe? Or keep the coloured indicator as-is but list the events in popup in generates?)

And it's funny how you have a yearly increment/decrement view. I've done that too (for the school website I'm currently making) but haven't yet had chance to put it into the official release of my alternative PHP calendar. Yey! Great minds think alike! http://agc-h.fofwebdesign.co.uk/pare...ary-dates.php?

[jscheuer1]

Looks good! The school calendar. That's interesting about more than one event on a given day. I'm using a dates object to store them. Multiple events would likely have to all be properties of the same key. I'm thinking that could be an array, or perhaps another object with keys that are the time of day. It already can have multiple keys for a given date because there's the day number only key, the month and day number key, and the year, month, and day key. But with the current logic only one key per date would be read (logical or in the lookup), I should probably change that. With such small date boxes, there can only be limited ways of indicating an event. I think I want each month and/or day to be able to be blown up though, and the actual size is already configurable via style, so - say using just the month view, could be much larger. In the larger view(s) I was thinking of having it be as much like a regular calendar as possible with the info just written on there as best as it fits, though with an additional pop up or even link options as needed for more complete information. The code currently assigns a class. That's used to highlight. The person setting up their version of the calendar gets to choose what that class does though, what styles are associated with it. I've also thought of making the addition of a custom class to an event an option. Each event is already itself an object, so can have all sorts of properties.

[Beverleyh]

With such small date boxes, there can only be limited ways of indicating an event.

Yes, I pondered over that one too. And it's further exasperated on mobile - those weeny squares are quite a challenge for stubby fingers. The monthly grid I think looks neater but I suppose we need to put visitor intentions/comfort first and give them a sniff of info upfront so that they can decide if it's worth the extra click/tap to reveal a popup. I saw an example on another school website where the days only had a coloured background to indicate events, but you had to click on every square to see what was going on. And the month was busy so it was too onerous. If it just had a few words on show to give an idea - even just a few letters such as 'Trip' on the day that had the 'Trip to the Railway Museum' - it would have made the task so much easier.

12 months makes for nice manipulation on larger screens though; the monthly grid boxes work nicely in a single column on mobile, 2x6 on portrait tablet, 3x4 on landscape tablet/small desktop, and finally 4x3 on larger desktop. 12 is one of those numbers that works so well in so many grid formats, without looking misbalanced or having an orphan float stuck at the bottom on its lonesome.

In the larger view(s) I was thinking of having it be as much like a regular calendar as possible with the info just written on there as best as it fits, though with an additional pop up or even link options as needed for more complete information.

Maybe a double-edged approach could be an option? A radio to switch between a smaller, more compact yearly grid, OR, a larger scale calendar with more event details visible? That's my next task too but only in the one-month view (my yearly view is just an event list with info on display anyway). The home page currently demonstrates both views http://agc-h.fofwebdesign.co.uk/ (near the bottom), but you have to really squeeze it in small before it flips from month-grid to a compact-but-more-easily-readable event list. I plan on having a button that simply adds a class to the overall container, and then use that class in the CSS to change the layout (like what the media query is already doing for mobile), but I think that you would have a JavaScript way up your sleeve to achieve a layout/DOM manipulation change instead of my sneaky CSS way?

[jscheuer1]

I think you're speaking my language. These things, if they're worthwhile at all, tend to take on a life of their own as you hint at in how the various divisions might feel about being orphaned. I spent most of my time today that was allocated to this project breaking out (to a single declaration space) and hopefully improving (making more flexible and logical) repetitive functions and data. For example, I took care of the logical or issue I mentioned before. jQuery is a little odd because, once you declare a $.fn.newfunction() this refers to the jQuery DOM object/jQuery DOM object collection passed to the function, you cannot easily (if at all as far as I know at this point) use the function's instance or prototype in the usual manner, which I find a little frustrating, but for now I think I have a good way of dealing with it. I'm using an anonymous function to declare the $.fn.calendar function in. JQuery doesn't care, it still becomes a part of jQuery's prototype, but it gives me an environment in which to make public, semi public, and private variables/functions.

It likely will make more sense once you have a look at the latest (main script is now external):

http://jscheuer1.com/demos/tidbits/time/

I like the idea of a radio switch between month/year view mode - regardless of platform (mobile, etc.) that would be handy. And by adding one or more strategic class names, the month view could appear much larger than a given individual month does now in both the year and month views. Even just using the id of the parent/target element, one could do that now with this in a more limited way.

One other thing, CSS is often the way to go if it's sufficient.

[jscheuer1]

Ackk! I finally transposed an earlier custom function I had written for some other code, so that now the dates object can include entries based upon the nth day in a month! Like:

<script>
jQuery(function($){
	var calert = $.prototype.calendar('calert'), mydates = {
		"5,25" : {title: "My Birthday!", click: calert, content: "Happy Birthday John!"},
		"10,8" : {title: "Lois's Birthday!", click: calert, content: "Happy Birthday Lois!"},
		"11,4Thu": {title: "Thanksgiving, USA", classes: "harvest", click: calert, content: "Happy Thanksgiving!"}
	}, dt = new Date();
	dt.setDate(15); dt.setMonth(dt.getMonth() - 1);
	$('#now').calendar({date: dt, dates: mydates, showYear: true, controls: 'before'});
	$('#may').calendar({date: new Date(2016, 4, 25), dates: mydates, controls: true});
});
</script>

To, for example select the 4rth Thursday in any given November. The beauty part for me though is that the Thu part is based upon the configured day names, so it should be language transposable/intuitive.

Demo (same as last, may need to be refreshed/cache cleared - you know the drill ):

http://jscheuer1.com/demos/tidbits/time/

[jscheuer1]

I may stop here for now. There just doesn't seem to be all that much room - well there would be if I added a week-at-a-glance mode. I think that might be a plug in to the plug in though because, as it is, it's a very lightweight simple calendar for people who just want pop up dates and simple event reminders. I'm also thinking there could be another plug in for manipulating the single calendar view for things like submitting dates for bookings, even a trailing, or I guess more accurately, a foreshadowing calender as is used for online banking when selecting outgoing dates for payments with a projected received no later than date.

I've already added an optional description field for any given set date. In the week-at-a-glance mode, that could be the text shown for that entry. Still need to determine the most efficient way of working with more than one event per day. At least they're no longer logical or, though I'm wondering if the net effect may not still be mostly that.