# How to build a simple calendar/appointment booking application?

**URL:** <https://discuss.emberjs.com/t/how-to-build-a-simple-calendar-appointment-booking-application/1560>\
**Category:** Design\
**Created:** [June 19, 2013, 2:10pm UTC](https://discuss.emberjs.com/t/how-to-build-a-simple-calendar-appointment-booking-application/1560 "2013-06-19T14:10:59Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![chrisb](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/chrisb/32/14677_2.png) [@chrisb](https://discuss.emberjs.com/u/chrisb)\
**Post date:** [June 19, 2013, 2:10pm UTC](https://discuss.emberjs.com/t/how-to-build-a-simple-calendar-appointment-booking-application/1560/1 "2013-06-19T14:10:59Z")

</div>

How would I go about handling ‘days’ and formatting days into a weekly, monthly or yearly format in a calendar/appointment booking application?

I’ve been thinking about this for a few days and can’t think of a good solution.

I don’t want to store thousands of ‘day’ objects and their appointments in the database. I’d only like to persist appointments.

That means I have to create all the ‘day’ objects when the application boots, loop through the appointments and assign them to the correct days. _Then_ loop through the list of days in my template, displaying appointments on days when there are appointments.

Then I somehow need to output the days in a weekly, monthly or yearly format (configurable by the user). I’m not sure what the best way of doing that would be since handlebars is logicless beyond the most simple control structures (a good thing!).

So basically, I’m asking:

1. Am I approaching this problem correctly

then if so:

1. Where abouts in the application should I create all my day objects (there must be an init hook somewhere that’s suitable?

2. What’s the best way to loop through all my day objects once they’re created where they’ll have access to the appointments objects, and what’s the best way to determine whether the appointment falls on that day? The only way I can think of is (semi-pseudo code):

Which will probably perform terrible if I’m iterating through a year or five and have a couple of hundred appointments.

1. After that’s done, I should be able to loop through my day objects and output appointments where they appear, but how would I go about formatting them into a grid in a week/month/year view?

Edit: Fixed code formatting Edit 2: …or not, Markdown won’t let me format it correctly. Whatever, you get the point!

---

<div class="post-metadata">

**Author:** ![lookingsideways](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/lookingsideways/32/13652_2.png) [@lookingsideways](https://discuss.emberjs.com/u/lookingsideways)\
**Post date:** [June 27, 2013, 9:55am UTC](https://discuss.emberjs.com/t/how-to-build-a-simple-calendar-appointment-booking-application/1560/2 "2013-06-27T09:55:37Z")

</div>

Have you seen this? [https://github.com/joinspoton/ember-calendar](https://github.com/joinspoton/ember-calendar)

---

<div class="post-metadata">

**Author:** ![Pilogiq](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/pilogiq/32/15908_2.png) [@Pilogiq](https://discuss.emberjs.com/u/Pilogiq)\
**Post date:** [June 12, 2014, 4:56pm UTC](https://discuss.emberjs.com/t/how-to-build-a-simple-calendar-appointment-booking-application/1560/3 "2014-06-12T16:56:12Z")

</div>

Hello, I also made a calendar/agenda in ember and as you said, the grid’s rendering is not pretty efficient.

I’m curious about what solution you got into ?

(a google search about “ember” and “calendar” pop this thread in the firsts results so let’s clear the question out !)

thanks !

---

<div class="post-metadata">

**Author:** ![designbygio](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/designbygio/32/5018_2.png) [@designbygio](https://discuss.emberjs.com/u/designbygio)\
**Post date:** [October 8, 2014, 10:58pm UTC](https://discuss.emberjs.com/t/how-to-build-a-simple-calendar-appointment-booking-application/1560/4 "2014-10-08T22:58:22Z")

</div>

Hello @chrisb did you figured out how to build a calendar with Ember at the end? I would be very interested to see your way
