Schedule Template
November 16, 2016 | 30 Feedbacks

Schedule Template

A simple template that lets you display events on a timeline, as well as organize them in groups (week days, conference rooms etc…)
Browser support
  • ie
  • Chrome
  • Firefox
  • Safari
  • Opera

We’ve come across this web component many times: when we check the schedule of a conference, or the timetable of the classes of our gym. From a web designer perspective, it is handy to have a simple, responsive template to use if you ever need to create a schedule table. So we built one!

Creating the structure

The HTML structure is composed of three different elements: a div.timeline for the events timeline(09:00, 09:30, ..), a wrapping the events list and a div.event-modal for the modal window used to provide more details about the selected event.

Adding style

On small devices (window width less than 800px), all the events inside an .events-group are lined up horizontally: we set a display: flex to the .events-group > ul element and an overflow-x: scroll to make the events scrollable.

As for the .event-modal, it is has a fixed position and it is moved to the right outside the viewport. When the user selects an event, the .modal-is-open class is used to translate the .event-modal back into the viewport.

On bigger devices, all the events are in absolute position and placed inside a timetable: the top position and the height of each event are evaluated using the data-start and data-end attributes of the event itself and set using JavaScript (more in the Events handling section).

As for the .event-modal, the opening/closing animation is created using jQuery combined with CSS Transitions and Transformations (more in the Events handling section).

Events handling

To implement this event schedule, we created a SchedulePlan object and used the scheduleReset() and initEvents() functions to init the schedule and attach event handlers to the proper elements.

On big devices, the scheduleReset() method takes care of placing the events inside the timetable and set their height. To evaluate the height, for example, we calculate the duration of the event (data-end minus data-start), divide it by the ‘eventUnit’ (in our case it’s 30 minutes) and then multiply it by the height of ‘timeline unit’ (in our case, 50px).

When the user selects an event, the jQuery load() function is used to load the content of the event just selected (its data-content is used to determine the file content to be loaded).
In addition to that, on big devices, the .event-modal is animated to show the event content. First, the .event-modal is placed on top of the selected event and its height and width are changed to be equal to the ones of the selected event; then the .header-bg and .body-bg elements are scaled up to create the morphing animation; at the end of this animation, the modal content is revealed.

One note: we implemented a simple load() function to upload the new html content, but you may wanna replace it with a $.ajax call in order to handle errors, beforeSend request etc. according to your project.


Nov 16, 2016
  • Resource released by CodyHouse

Claudia Romano

Web developer, fan of The Big Bang Theory and good food. Co-founder of CodyHouse and Nucleo. You can follow her on Twitter.

  • Maciej Buchert

    Maybe add support for Google Maps ? :)

    • Robert Dunham (Nilpo)

      Do you mean Google Calendar? I’m not seeing the connection between a schedule and Google Maps.

      • Maciej Buchert

        I mean Google Maps. Add small embed map with place where the event is.

        • Lauhakari [mikko]

          Well that might just be a task for your to do, so you learn how to ;)

          • Maciej Buchert

            I know how :) but maybe someone doesn’t know :)

  • Roee Yossef

    very nice :)

  • Furkan Acar

    It’s just a how to use modal tutorial, and yes a scheduling app should be clean-designed but not that primitive.

    • Sebastiano Guerriero

      Hi there! we try to keep our components as simple as possible. We could embellish them more, but then it would be more difficult for developers to use them.

  • Boba Fett

    Very nice. I made it work . Sort of…..I can get the first part done, but with my limited knowledge I have no idea how to insert the other html files that shows write ups in pop-ups in Weebly framework :(, :(, :(

    • Claudia Romano

      Hi Boba, the data-content of each event is equal to the name of the html file with your content. So make sure this attribute is equal to the name of file you created. Hope this helps!

  • Damir Dizdarević

    love how you solved the mobile view!

  • rjim

    Are you manually entering the events in the index.html file? Or, do you have a front end set up for entering the events. Maybe, I’m just missing something.
    It looks great and I like the nice clean appearance.

    • Robert Dunham (Nilpo)

      rjim, this is just a proof of concept. You’ll need to build an application to add your own functionality.

    • soulstatic

      Just about to ask the same question. You could do this with a host of things. WordPress and some custom fields and/or posts.

  • Bomav1

    Nice, really, really nice! But… I have noted one thing, the “show” animation is smooth and perfect, but the “hide” animation looks not so good, why? Because, it is not smooth, the white block just disappears without any “transition”, maybe it’s better to make some “transition” on white block and reduce the block’s width with smooth animation? (from the big block to the smaller block)

  • Robert Dunham (Nilpo)

    I would suggest changing your elements to elements. if you were building in app with this, generating UTC times would be trivial and would very quickly allow this to display localized times. You could also use something like Moment.js with ease since it expects the element. Browser support is good in all major browsers, although it isn’t much of a concern since it will fallback to an inline element anyway and your is only being used for layout.

  • Talia

    Great code, I’m just confused when it comes to inserting additional info into modal window. Could someone explain how to do it? Would be really grateful :)

  • William Ode

    How can I add route management ?

  • Glenn Hooton

    It’s nice but buggy. If you add more time elements e.g. 19:00 the vertical lines don’t come down to those. Also if you have empty day elements e.g. Tuesday the vertical lines don’t appear.

  • Tim Robinson

    Is it possible to sort the schedule by later events first?

  • yuanxin

    can i display the content from database instead of loading new html

  • cgi

    How display two or more schedule in the same page?

  • Angel Bonet Catala

    Hi, How can I add new columns (saturday and sunday in example). I’m trying that but I’m going to be crazy with that. I’ve added a new for saturday but it’s placed under the schedule and if I change the column numbers in variables nothing change.

    I’m in learning process about all this and your article it’s excellent for people like me. Congratulations.

    • Angel Bonet Catala

      That’s unbeliavable. I’ve do it. After my post I’ve changed “.cd-schedule .events .events-group {” width percent to “14.28” (7th part of 100%) and it’s ok. But now I have a new question because if “_variables.scss” file remains with only 5 columns defined the result show 7 columns. Then… can you explain the “$column-number” definition, please.
      Thank’s in advance.

  • Jonas Bakker

    Hey, how can I change the number of rows. I can’t find it anywhere. It defaults to 20 but I only need 18

    • Angel Bonet Catala

      You must delete lines of “timeline” class in index.html file.
      After you can change the height in pixels in “style.css” file to adjust to your row number. Default is 950px and you mus calculate 50px per row deleted. You can find this valour under “.cd-schedule .events .events-group > ul” definition.

  • Ljuo

    Hello! I was wondering… how can I change the rows height? Currently it is 50px but if I change it to 30px for example the events do not follow the rows?

  • Farzad

    Very useful as always, I recently worked on a project with similar feature where they wanted the events to be clean and clear and not cluttered like loads of calendar plugins out there…

    However my duty wasn’t just to do a simple UI and fire each one of those hard-coded events, but was to do it through an API call and make sure they stay in sync so if two people added an event they would see the changes seamlessly…

    I used React as a dependency however it was still achievable without React! The only reason was because the rest of their web app was done in react, so I spent a week studying React too which was very easy to grasp…

    I was thinking if you guys could also introduce some React tutorials as well…

    I have to say you guys are awesome :) wish you all the best