14 Feb

Create iCal-like Calendars with CSS and jQuery

Calendar, License Free

Leave a Comment

One of the most common requests from clients when it comes to Wordpress personalization, is to add a basic event calendar to their website. Finding a good place to position a big table like a calendar within your Wordpress template is always a taught work. In addition, the <table> tag itself is often quite difficult to style in a good way.

Therefore, Stefano Verna came up with astonishing iCal-like calendars with jQuery. All the magic takes place with some ninja CSS. In addition to the plain calendar structure, You can see a lightweight Coda-like effect for events description popup as well.

Requirements: jQuery Framework
Demo: http://www.stefanoverna.com/wp-content/tutorials/ical_like_calendar/
License: License Free

Sponsors

Comments

Pingback: Turulcsirip - Tamas Bogdan
http://blog.olicio.us Oskar Krawczyk

Don’t really know what is so astonishing about it, this kind of calendar can be wrapped in 5 lines of JavaScript code. Also, it’s not really usable, no access by keyboard… is pretty bad.
mRs

But it looks cool >_<
http://www.anoldhouse.net/blog/ Matthias

It’s looking quite nice and the code seems clean. Does someone have a nice (also jQuery based) alternative?
http://www.spiced2.com Thomas Fjordside

I’m also looking for an alternative to this one.
vimpat500

This looks really good..but dont see anything more happening with this..can we have it..
ian

As far as a platform to build off of, this is sooooo nice. Good job on this.
Sander

why do you want an alternative if you can use this?

unless you think this one is not good enough and an alternative (hard to believe) will look better :p
Pete

As it stands, it’s a really nice template to work with. It’s not dynamic with respect to automatically generating the right dates in the calender, however using some PHP, I have my version now retrieving a list of events for the current month, work out the fist day of the month, start the calender from that point (rowspanning as many as is necessary. if the 1st day of the month is saturday, you need to rowspan the first 5 tells on the first date line) and then looping through all the days of the month adding event’s for the days where applicable.

In short, a really nice platform to build off if you have the know-how.
Sander

yes pete, was thinking the same, as a asp.net developer i’d do it about the same

but, i was wondering if building the calendar (and making it dynamic by adding next and previous with slide animations between months) could be done trough Jquery itself…

i’m going to experiment it anyway
if i get a solution with jquery i’ll defenatly post it
but keeping my limited jquery capabilities in mind, i might not really get anywhere at all :p

i’m gonna try, that must count for something right….
http://weberty.ru Gena

cool calendar
but how can i add event?
or it’s just fixed dates?
http://arifhossen.wordpress.com Arif Hossen

Very Nice Out looking. But How I Can Add My Event.If you possible add whole customize Option in this calendar.
Yuliana

Nice.. but i need to put this in my cakephp project, how can i do it?
http://www.amongchina.com.cn web design China

I like its layout,but I want to know how to use it as a real calendar? how can I insert date picker into it？
http://www.baboon.ir/ baboon-ir

cool calendar

Open Source Resources for You

What we need is a list of the top quality resources, so that we can spend more time on our web development. WebAppers only picks the top quality web development resources for you.

© Copyright 2012 WebAppers | About | Archives | Privacy Policy | Advertise | Contact