Calendar Design

A Calendar template is being introduced in the 8.3 release which basically makes it easier to create Calendar based designs by automating the creation of  various date elements as well as making it easier for customers to add events to unique dates on their calendars.

In the past, creating a calendar design had required site owners to create each month-page individually as PNG background images in a graphic tool and then manually create thirteen pages on PitchPrint. With this template, all that is needed by the admin is the cover page and a sample template of the first month (January) here, and the rest is generated at design-time by the app on the customer side.

A sample can be  viewed here.

How to create your calendar template

When creating a design based on the calendar template, the app creates the first two pages, the cover and the first month. The shop owner is required to modify and design these two pages to reflect their design intent for the whole calendar. The second page will be replicated across as other months with their corresponding dates calculated. It is also required to set the default week start date as well as the month on which the calendar starts.

So to create your calendar template, go to the  designs page, click the button to create a new design on your intended category.

The dialog that appears now has a third option for template. Click it and select Calendar after typing in your awesome title.

The loaded design now has two pages with default contents on them. The first page is basically a regular PitchPrint page with a mask shape on it and few elements for design. You can edit this as you like.

Page 2 (January) is very important, that is where all the template elements for creating the calendar are. Here, you will find the following:

  1. Shape Mask – You can delete this if you like, but remember it will not be replicated if deleted. Should you want your customers to manually place elements on each page without masks, then you can remove it. The Photo Here text is just a reference text place as a guide.
  2. Month + Year – This is dynamically edited on each page to reflect the month and year of the calendar. You can even have it as month or year alone and can move it around, edit the text formatting styles to reflect your design intent. If you delete it, then the calendar will have no way of telling what month it is. You can add yours but make sure to label it exactly as shown in the default item (month+year)
  3. Day Item – This shows the day of the week and can also be formatted to reflect your design intent. The first element controls the others, including its positioning and formatting. You can try this by moving it vertically up / down, the rest will likewise move to align proportionately. For precision, you can turn off the snap tool or use your arrow keys to move it about five pixels at a time and see the rest follow as sheep. Please do not delete this or its label.
  4. Date Item – The Date item controls the date text on each of the 31 days on the calendar. This is adjusted relative to the date-bound item’s boundary.
  5. Date Bound Item – This item controls the calendar dates row – column alignment. It’s bound to the left of the page is used to calculate the other two bounds (right and bottom). So by moving it inwards, you will increase the left bound and in effect, increase the right and bottom bounds as well. Scaling works the same way. Scaling it affects the others’ scale.
  6. Date Message Item (for date events) – This item is not easily visible, so be careful in selecting it. It is the template item used in formatting the date’s events when customer adds an event to a date. The design rule of thumb is, place it inside the date-bound item’s boundary, and centered.

Still need help? Contact Us Contact Us