How to Build a Beautiful Calendar Widget: New Premium Tutorial
plusvideos

How to Build a Beautiful Calendar Widget: New Premium Tutorial

on Jun 25th 2010 with 39 comments
Download Source Files

In today’s premium tutorial and screencast, I’m going to show you how to build a slick calendar widget. We’ll using CSS3 to give it a shiny look and feel, and then add some pretty neat functionality with JavaScript. Become a Premium member today to see this and many other tutorials!

Final Product

 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By

Rollover to read this author's bio or click through to see a full list of posts by this author.

I'm a Canadian web developer, a staff writer at Nettuts+, and the author of the Rockable Press eBook Getting Good With Git. I prefer JavaScript and Ruby. Soon, I'll be doing some writing on my personal site; of course, you can follow me on Twitter.  

Plus Premium
 
 
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
  • Marcus Schumann

    Calendars are awesome. Needed for a lot of applications!
    Just curious as I do not have Plus; What “neat” functionality? Wondering if it’s worth it to get Plus :)

    • http://andrewburgess.ca Andrew Burgess
      Author

      I’ll show you how to generate the calendar grids and fade in the correct month when the user clicks the next and previous month buttons.

  • http://www.clockdiscount.com Ed Baxter

    What is the functionality you speak of :P Also it would be nice if Envato allowed us to pay for each plus tut individually!

    • Boris Badenov

      Yes, I so second that idea. Not all tuts I need but pay as you go is good

      • Tyrone

        Its only $9… Access to all files. Thats a steal if you ask me!

      • http://michaelkral.com Michael Kral

        I agree Tyrone, its a steal

  • Mohamed Zahran

    It seems awesome but I don’t have Premium Access lol.

  • Gav

    Damn – just cancelled my membership :-(

  • craig

    Seriously
    i have a premium acct (defectivereject)
    Yet the site never remembers my log in, and whenever i go to the dashboard to get the link it diverts me back to the tutorial as a logged out member….!
    Its also not in the premium content on the premium side either.

    Sorry to sound like an ass!!

  • David

    And why is this a plus tutorial? 10 bucks says its just a single HTML page and just uses the javascript to change the date grids.

    Sadly the premium tuts are just as good quality as normal tuts…most of the time regular tuts are better then premium tuts.

  • David

    Why is this a plus tut???

  • http://spotdex.com Davidmoreen

    Oh wow that is pretty cool, I’ve never made a calender myself, I use other peoples code… Time to learn!

  • http://teslacreations.com/ Karol

    Hi guys, I’ve got a suggestion
    It would be great if we had a button saying something like ‘login’ just underneath the screenshot. Clicking it would redirect to login and then directly to the screencast. I am a premium member, but always find it hard to find where login is and then search for the tutorial – it’s quite annoying if the tutorial has been released ages ago and I have to find it ;)
    Don’t get me wrong – I just love these tutorials and screencast, really appreciate your work and will always get the premium membership. Don’t want to be picky but it’s a bit frustrating :)

    keep up the good work :)

    • Chintan

      I definately second that notion. It is quite annoying searching for tutorials.
      It shouldnt be too hard to implement that functionality either, and it would definately be awesome :)

    • Chris

      I totally agree. The implementation of the plus+ stuff is probably the weakest part of this site. I do the same thing and find it hard to find those old ones. anyway, hope it gets better in the future.

    • Barry

      I would like an easy to find login button as well, if possible.

  • nouky

    Can we see a working demo??

  • ShadowAssassin

    I really don’t know why this is a Plus tutorial, I mean, this seriously is hardly useful, and jQuery (UI) can do exactly this with a few lines of code.

    I feel Tuts+ slowly going downhill. :(

  • elemes

    @Karol ~ I second that motion. logging in and finding premium content is quite the headache…

    @ Andrew Burgess ~Thanks for this quick tut. A bit long, but overall good content.

    +++ offTopic real quick, I have a quick question about the status board tut in the bonus content. I use notepad++ for all my coding needs and I would really like to know what plugin/key combo you were using to auto-complete your code. For example, every time you would type ‘div#idName’, notepad++ would complete the line for you as </div. I have my TextFX settings set to autocomplete xhtml/ml tags and braces, etc., but I do not get the same results. Any help greatly appreciated.

    Thanks,

    -elemes

  • Jay

    Very cool! Definitely inspired by this design: http://365psd.com/day/81/

    • http://andrewburgess.ca Andrew Burgess
      Author

      Yep! I mention that in the tut ;)

  • http://3ansdemulti.com Patrice Poliquin

    Does the link broken? I can’t donwload even if I’m a prenium one?

  • http://www.juancarlosrois.com Juan C Rois

    Andrew,

    This was a GREAT tutorial, I’ve always been intimidated by calendars, I learned a lot and I hope I can improve on it, adding my own functionality.
    Great work, Great tutorial.

    Thank you very much

  • http://nil danc

    I think there is some incomplete with this tutorial. Why is the days’ CSS haven’t been fixed? And why is the current date isn’t shown, when it opened in the browser?

    Sorry for being picky. But I feel that you should be more professional on this.

    Thanks anyway for the wonderful tutorial. Perhaps you can have a part 2 series, which show us how can we put in the TO DO, Notes and reminder etc….

    Cheers.

  • http://www.woony.be woony

    why is this premium..

  • danc

    Ya, I just found out another problem. Since this is a premium one. Why is it not supporting IE? Not even the latest IE8? SAD!

    • John

      You are a very demanding chap!

      • Danc

        Demand make perfect. I am just trying to make things better. And hopefully make those who paid feel worth it. Though the charge is not much. I hope I am not doing it wrongly.

        Ultimately, people upgraded themselves to premium, wish to learnt more than what normally gave or a basic tutorial.

  • http://diseñadorwebmurcia.com javier Murcia

    It seems a beautiful calendar

  • Fred

    Looks cool, but i’m not going to be a premium member or pay to see this. Plenty of other tut’s out there.

  • MG

    Let me point out to you fine consumers that squawk about how this tutorial is not of premium caliber, even though the implementation of this calendar in its current form is not of much use, the possibilities of enhancement is limitless and this tutorial creates a good foundation. This particular tutorial demonstrates techniques in html, css, javascript and the jquery library. I myself found the tutorial very interesting and gain several points of knowledge from it. I feel my money was well spent. The truth of the matter is that you are getting quite a lot for the small price paid and if you want more then expect to pay more.

    To those authors contributing material – keep up the good work.

    Feedback for this particular video: I would have broken the video in sections, that way the end user can watch what they need. Also the css was somewhat hard to follow because you could not really see the effect as you were explaining it. I have seen Jeffery Way use the firefox developer tool and also coda where as soon as you type the css it is applied to the view, which enhances your explanation because the end user sees it as you type it. Also those nested ternary statements are more trouble than they are worth, in fairness, you mentioned that in the video. Over all I think you did a good job and I look forward to more of your content.

    MG

    • http://andrewburgess.ca Andrew Burgess
      Author

      Thanks for the comment and constructive critique!

  • http://www.owlcreative.co.uk Linda S

    I gave up on this tutorial pretty quickly, it had too many “hacks” or bad markup.

    First of all, the header markup is awful. The month is in a span, clearly this is a heading? And he’s using “&lang” instead of a previous button, how is this going to be understandable to a screen reader? In my screenreader this reads out as “LEFT ANGLE BRACKET”. The next and previous buttons are not even next to eachother in the markup, and a smaller detail is that it would probably be more useful to have the next button first, followed by the previous button. In any case the Month should be before the previous button, otherwise how would you know what you are going to the previous of?

    The days are clearly table headers with the scope of the columns. Now he said he did do that originally but then couldnt figure out how to do the javascript to fit it. So he changed the markup to fit his javascript.

    At this point I stopped watchiing because if the markup, the the most basic and fundemental part, was this shoddy, I would not take CSS or javascript advice from him.

    • MG

      It just surprises me how many folks think these tutorials should be production ready code. I don’t think anyone here is advocating this code to be best practices, but instead a simple tutorial to give people ideas on how to create things, inspiration. It is up to the consumer to decide what are best practices and implement their code that way. The whole idea here was to transform a calendar psd to a functioning widget and that was done successfully. If you dismiss something so quickly, surely you will miss the diamonds in the rough.

  • David

    cool tutorial, but not something I would want in the premium content, esp when there are other things out there like the jquery UI library which creates a nice looking calendar for you.

  • Viktor

    I’d love to see a tutorial on how to create a calender with mysql events

  • Brian

    I’ve just about had it with Tutsplus. I happily payed to become a premium member, only to find the content navigation system the site employes is absolutely TERRIBLE. Good god people. I am so irritated with the difficult it is to find the premium content.

    This article states clearly, “In today’s premium tutorial and screencast”. Yet there ISN’T A LINK to be found. I’m logged in, yet I don’t see my account credentials loaded anywhere on the page to confirm this. So I don’t really know if I’m logged in, or if the site forgot I’m logged in. I see a link to download the .zip files, yet I see 3 advertisements for becoming a premium member.

    I’d love to go through formal channels and e-mail the site designers/administrators, yet the contact page has a section where I can post questions, that must then be moderated to be important?

    The user design is utterly horrible, yet I really love your tutorials. A perfect example of looks good, but works terribly? I’m perplexed, and I don’t think I’ll be renewing my membership. The content is wonderful, but finding the content is absurdly difficult.

  • Renato Aranda

    This was a GREAT tutorial , but have some problems the functionality and it’s not supporting some important browsers like IE, Opera, and firefox ?

    Looks cool, but… I’m a new premium member and really expect more .

    Danc, put a really good point

    “Ultimately, people upgraded themselves to premium, wish to learn more than what normally gave or a basic tutorial.”

    We Need A Second calendar Tutorial, pleeease

    Thanks anyway for the wonderful tutorial