How to create SharePoint Hosted App development environment and deploy a SharePoint Colored Calendar

After setting up my environment for SharePoint app, I was thinking about writing my first app for SharePoint. After a long weekend thinking to find my first  “Hello World” kinda app, I came across this Color Calendar solution on one of my great friend Mark Wilson’s blog. Kindly, he has agreed to use his idea to try it on my first SharePoint app and here is it below…

Just before going into the details, please find the environment details which I used for the Color Calendar app.

Environment Details: (Setup – Configure App environment)

• Web Application  and a Root Team Site (ex: http://win-2j3idcdeuh6/)
• App Catalog site the above web application (ex: http://win-2j3idcdeuh6/sites/apps/_layouts/15/start.aspx#/AppCatalog/Forms/AllItems.aspx)
• App DNS (ex: sp.apps.local)
• App DNS Prefix (ex: spapps)
• Visual Studio 2012 with the SharePoint 2013 App add-ins

What is Color Calendar?

• One of the shortcomings of the built in SharePoint calendar list is that it does not support colour coding of event items…
• In this example, I just want to share the steps I followed to develop and publish the app.

Step 1:

• Create a new Project “ColorCalendar” with the option “App for SharePoint 2013”
• Select the Site and the Type of hosting as below

• Note: The types of App hosting details can be found here

Step 2:  Create a Custom List based on the calendar list

• Right Click on the “ColorCalendar” project and Add a new List

• Click Next and Select the Custom List template option as “Calendar” as below

• Click Finish.

• Amend the List Schema to include a Calculated field as below

• <Field Type="Calculated" ID="{2A55D341-73C9-4df9-8BC6-F9A754A08F82}" Name="CategoryTitle" DisplayName="CategoryTitle" ResultType="Text" ShowInDisplayForm="FALSE" StaticName="CategoryTitle">
          <Formula>= "|||" &amp; [Category] &amp; "|||" &amp; [Title]</Formula>
          <FieldRefs>
            <FieldRef Name="Title" />
            <FieldRef Name="Category" />
          </FieldRefs>
        </Field>

   

• Amend the “Calendar” view as below

•   <ViewData>
            <FieldRef Name="CategoryTitle" Type="CalendarMonthTitle" />
            <FieldRef Name="CategoryTitle" Type="CalendarWeekTitle" />
            <FieldRef Name="Location" Type="CalendarWeekLocation" />
            <FieldRef Name="CategoryTitle" Type="CalendarDayTitle" />
            <FieldRef Name="Location" Type="CalendarDayLocation" />
          </ViewData>

   
• Amend the Default.aspx to include a webpart zone (to display the Calendar – ListView webpart) and a JS section to implement the ColorCalendar functionality