/ best free open source web resources /

Graphic Resources

Create iCal-like Calendars with CSS and jQuery

Posted · Category: Calendar, License Free

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.

iCal Calendar

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

  • Pingback: Turulcsirip - Tamas Bogdan()

  • 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 >_<

  • It’s looking quite nice and the code seems clean. Does someone have a nice (also jQuery based) alternative?

  • 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….

  • cool calendar
    but how can i add event?
    or it’s just fixed dates?

  • 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?

  • 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?

  • cool calendar

  • Ashekur Rahman Hridoy

    How to download this source file?

Supported By


Web Browsers Icon Set
Food Icon Set
Flat Icon Set

Flat Icon Set

100 icons