New: Calendar (event management) freebie for download

[Beverleyh]

I thought you might like to see/play/tinker with my latest freebie script.

UPDATE: 4th March launch - DOWNDLOAD 'FAST CAL' NOW http://fast-apps.co.uk/fast_cal.php

It's called Fast Cal (following the theme of my other Fast Apps freebies) and it's a small event management tool. Also flat file - no database needed.

Use it to keep an online diary that displays events in a responsive monthly calendar grid or whole year layout mode. Extra event details can be viewed in a popup.

Admin Panel: http://fast-apps.co.uk/fast_cal/

Monthly Calendar: http://fast-apps.co.uk/fast_cal/examples/sample_calendar.php

Year Calendar List: http://fast-apps.co.uk/fast_cal/examples/sample_calendar_list.php


It's still under development to iron out the kinks but I'm hoping to release it before Easter.

[mlegg]

That's cool. Can the layout color of the calendar be changed? I've been using Google Calendars for my charity groups website (http://ahepa215.org/calendar.html).
I used that so people in our group can easily ass events.

[Beverleyh]

Yes, the colours/sizes/fonts, etc., can all be changed with CSS. I need to pretty it up some more (those Next/Prev buttons are default-ugly), and think about any missing features that I should probably include, but it's almost there.

If you decide to experiment with the demo and happen to think of anything that would make usage easier - either as a visitor or admin - let me know.

I still need to add categories (colour-coded box indicators and titles within the popups) to the monthly grid view. I didn't get chance to transfer the code over from the full year list layout when I set those up this afternoon, but that's on my to-do list next week.

I also want to add some sort of popup indicator to let visitors when extra info is available. At the moment, some events have popups and others don't, but there's no way of telling unless you tap/hover on an event title. Another planned to-do task :)

[jscheuer1]

Looks very good!

[styxlawyer]

That's great. An option to start the week on Monday instead of Sunday would be welcomed by many.

[Beverleyh]

Thanks guys :)

There's an option to change the week start day in the config file - Sunday or Monday

[jscheuer1]

So, forgive me if I'm dense. Is there a way to download and try this out so I can give more direct user experience feedback. I didn't see any obvious way. But I may have simply missed it.

Also - I want to applaud you again for this. It's the sort of app that very many need, and one I have often envisioned. To provide it for free is a great service.

[styxlawyer]

Thanks guys :)

There's an option to change the week start day in the config file - Sunday or Monday

Thanks Beverley. I didn't see that. As John wrote, a beta version for downloading and testing would be great.

[Beverleyh]

No download available yet chaps as I'm still working on things - but soon...

I've now added popup indicators and put the category inside the popup on the calendar grid view. I'm still a bit unsure about them but they're better than nothing at this stage.

I've also added a weekday header array in the config file - so you can choose to name the days of the week 'Mon-Sun', or 'M-S', or Monday-Sunday, or 'Montag-Sonntag', or whatever you like, etc.,

The Categories are also auto-generated and configurable from an array that looks like this;

// event categories paired with CSS classes for colour-coding
$categories = array(
'Assessment' => 'event-violet',
'Meeting' => 'event-red',
'Trip / Visit' => 'event-blue',
'Club / Sport' => 'event-green',
'Social Event' => 'event-gold'
);

[Beverleyh]

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

[styxlawyer]

I got around to prettying up the monthly calendar (grid) view: http://fast-apps.co.uk/fast_cal/examples/sample_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.

5842

5843

[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.

[ajfmrf]

Thanks for the awesome cal script Beverly.

I just downloaded it and will play around with it soon.

From what I have seen when looking around briefly,it looks rather neat(not cluttered with useless stuff),styled to a minimum (to allow others to address that on their own) and looks like it covers all of what most people
would look for in this type of script.

Thanks again Beverly

[Beverleyh]

No problem. These side-projects do a great job of keeping me out of mischief :D

[bojangles]

Thanks for the calendar script Beverleyh. The monthly Fast Cal module looks amazing and goes into my website with minimal changes (except to make the weekdays green, possibly, but I like it enough as it is). I love that I can add more details into the tooltip box AND also make a link. That will be real useful for pointing my site users to flyers and concert hall locations where we perform (for my band/music group website).

Thank you also for your 'focus' considerations. As a keyboard user, I hate it when webmasters disable button highlights and outline borders, because they're a familiar and visible aid for cruising the screen when a mouse isn't around :)

One feature that could be added to your event manager (not that it isn't amazing already) is an iCal export? Cuz I noticed with your Fast Feed script (that I've been using and loving for about a year) it has an RSS file export that updates at every save: an iCal export here, saving changes when events are updated/added, would be a welcome addition.

Thanks for sharing your script. I hope you consider my idea ;)

[Beverleyh]

Great minds think alike. An auto-generated iCal file is on my to-do list :D right after I get the inline JavaScript events separated out (Yey for event delegation), which I actually already have prepared but it's on another computer so haven't put it in the online release yet :)

[styxlawyer]

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.

I understand the need for highlighting the element which has focus, I just think the default square boxes are ugly. I've now added a 3px box shadow in your chosen colour (#308ce9) around the elements in question, which looks much cleaner.

[Beverleyh]

Hmmm, well that's entirely your choice but I would strongly recommend that you leave the browser focus/highlight defaults alone so that keyboard users know what to look for from website to website (consistency). From a user-experience point of view, it is better to work with user expectations than against them.

[sergi]

That's really cool. But can the layout color of the calendar be changed?

[Beverleyh]

That's really cool. But can the layout color of the calendar be changed?Yes, you can change the colours with standard CSS. And if you want to change the HTML output (layout) you can do it in the main functions file.

March 14th UPDATE: Fast Cal now exports events in iCalendar (.ics) format

[Ripsaw]

You've excelled yourself again Beverlyh. Great script. It incorporates everything I need.

I think there's a small error in the CSS on the weekday header gradient. Is a # missing?

[Beverleyh]

Not sure - I'll be back at my desk on Monday so can check the CSS them. Thanks for the heads-up and thanks for the feedback Ripsaw :)

[Beverleyh]

Turns out the missing hash was on the 'metal ring' gradient ;)

Today I've made a few small fixes (mostly to Saturday/Sunday in mobile view where popups didn't trigger) and tidied up the mobile view of the monthly calendar a bit more. It now only lists that month's events, rather then a full list of all the days in a month.

I've also added a "No events this month" message to months where no events are available (e.g August 2016 in the demo http://fast-apps.co.uk/fast_cal/examples/sample_calendar.php).

Download an updated file here: http://fast-apps.co.uk/fast_cal.php

[mlegg]

Is there somewhere in the FAQ that tells you how to allow other people to access and edit the calendar to add events?

[Beverleyh]

Only admins that are defined in the config file can add events. You'd set them up and send them the link to the backend admin panel where they can add events.

[mlegg]

thank you

[ajfmrf]

Just looked at the newest version and played for a bit with is.

The category of "assessments" what is that? something like dr appointments???

[ajfmrf]

opps for got.I ther any possibility that you could set up this calandar to work with Amazon Echo?

[Beverleyh]

I work at/with schools so I put an Assessments category in the demo for their benefit because school calendars tend to have exam dates in them - in fact, the whole demo is a school calendar ;). Assessments is the term preferred for younger children though, and special schools (which is how the calendar came about because I'm currently developing a website for a 'special needs' school).

The categories are totally customisable so you can very easily take out/change them in the config file.

What is Amazon Echo? I haven't heard of it. (Education has its own genre of web requirements)

[ajfmrf]

Google it Beverleyh.It is a new gadget from amazon kinda like siri or ask ggoogle.It can stream music from many places incuding but not the least Amazon Prime.It is being touted as the next big thing as far as gadgets go.

Many have jumped on the bandwagon and developed apps for the Ech and there will quite likely be a ton of additions to the "skills" which is how people can use the aps/skills .

[ajfmrf]

Google it Beverleyh.It is a new gadget from amazon kinda like siri or ask ggoogle.It can stream music from many places incuding but not the least Amazon Prime.It is being touted as the next big thing as far as gadgets go.

Many have jumped on the bandwagon and developed apps for the Ech and there will quite likely be a ton of additions to the "skills" which is how people can use the aps/skills .

[Ripsaw]

I'm avidly following the Fast Cal updates . Thanks for fixing the missing hash in the stylesheet.

The new mobile layout is IMO much better. Presenting the booked event days and leaving out the empty ones makes much smarter use of screen real estate, on cells where it matters most of all.

The "no events this month" overlay message is also a welcome addition.

Great work!

[Beverleyh]

Thanks Ripsaw.


The new mobile layout is IMO much better. Presenting the booked event days and leaving out the empty ones makes much smarter use of screen real estate, on cells where it matters most of all.

I might start working on a layout switch so that desktop users can see the events listed that way too (maybe with or without a cookie - I haven't decided yet)

Another possibility is to list all events by category, after the user selects from a dropdown select list.

The layout switch should be easier to do but Im tied up in work at the moment so personal projects are on the back burner for the moment.