New: Calendar (event management) freebie for download

[styxlawyer]

I got around to prettying up the monthly calendar (grid) view: http://fast-apps.co.uk/fast_cal/exam...e_calendar.php

Very nice. I look forward to trying the finished product!

[Beverleyh]

Fast Cal download is now available http://fast-apps.co.uk/fast_cal.php

[styxlawyer]

Thanks Beverley, it's looking good. I'm running it locally under XAMPP and there's a minor styling problem with the forward and back buttons. After moving forwards or backwards the appropriate button stays grey in Firefox and also has a pale blue square in Opera and Chrome (same rendering engine I believe). The first screendump is Firefox and the second is Opera (it's identical in Chrome). I'll have a poke around and see if I can find a fix.

[Beverleyh]

That's because they've received focus (button elements are focusable). When another element receives focus instead, those styles will vanish.

[styxlawyer]

I modified the CSS and the problem is fixed. I changed this:

#calendar-prev:hover, #calendar-next:hover, #calendar-prev:focus, #calendar-next:focus { background:#666; color:#222 }

to this (the focus CSS must be before the hover for it to work) :

#calendar-prev:focus, #calendar-next:focus { outline:none }
#calendar-prev:hover, #calendar-next:hover { background:#666; color:#222 }

Just out of curiosity, is there a reason for using the same right-pointing symbol for both buttons and then transforming the left-pointing one? Wouldn't it be easier to use ◄ for the left-pointing arrow?

[Beverleyh]

Easier yes, but it unfortunately isn't compatible with Android. The right-facing one is though, so that's the somewhat quirky reason for using the right arrow but flipping it the other way when you want to point left.

[styxlawyer]

Ah, now it makes sense. Thanks for the explanation.

[Beverleyh]

BTW I wouldn't remove the focus styles because it will make keyboard navigation difficult (you wouldn't be able to see what element is being tabbed to). I need to add onfocus JS event equivalents to trigger the popups without a mouse, so the focus CSS will work in conjunction with that. It's on my to-do list.

EDIT: I've now added an onfocus event to better support keyboard users. A small addition to the 'fast_cal/fast_cal_functions.php' file

[styxlawyer]

The updated version has the same behaviour in Opera & Chrome. Leaving the existing ': onfocus' CSS and adding an extra line before it (see below) removes the pale blue square, but keyboard tabbing still works. Keyboard tabbing seems to leave the 'balloons' open when moving on to the next event.

I don't have any iThingies to test on so only Opera, Chrome and Firefox on a Windows 8.1 laptop.

#calendar-prev:focus, #calendar-next:focus { outline:none }
#calendar-prev:hover, #calendar-next:hover, #calendar-prev:focus, #calendar-next:focus { background:#666; color:#222 }

I hope that helps.

[Beverleyh]

Browser borders on focusable elements are an accessibility aid to give a visible indication of position, and shouldn't really be removed. If you want to do it, that's fine and its you're call, but it isn't a practise I can recommend.