Links
Download and open this file within PowerApps to follow along or use within your own projects
Here is the slideshow that you can follow along with also
PowerApps Calendar
A more flexible and functional calendar for your applications
Who am I?
- Originally from Ireland ☘️
- Studied a Social Science Degree and then jumped ship for a Computer Science Diploma.
- Worked at a government organization building websites / apps out of statistical data.
- Now working at Insight since September of 2018
Why this calendar
- Originally came from a client requirement.
- They were looking for an iOS style calendar for a leave request app.
- They wanted to be able to select within a date range and have functionality for including / excluding weekends.
- This is what we came up with for them...
After this project
- We Decided it would be a good idea to take the calendar and build it as a stand alone app to reuse in other applications
- It was redesigned from the ground up
- Extra functionality for things like holidays
- Code refactoring for easier readability
Before we begin...
- I want to give credit to David Nissimoff, he created a tutorial on how to build the brains of this calendar which is what I've used here.
The setup..
ClearCollect(
colDateLookup,
{
Date: "1/1/2019",
DateINT: 190101,
Weekend: 0
},
{
Date: "1/2/2019",
DateINT: 190102,
Weekend: 0
},
{
Date: "1/3/2019",
DateINT: 190103,
Weekend: 0
},
{
Date: "1/4/2019",
DateINT: 190104,
Weekend: 0
},
{
Date: "1/5/2019",
DateINT: 190105,
Weekend: 1
},
{
Date: "1/6/2019",
DateINT: 190106,
Weekend: 1
},
{
Date: "1/7/2019",
DateINT: 190107,
Weekend: 0
},
{
Date: "1/8/2019",
DateINT: 190108,
Weekend: 0
},
{
Date: "1/9/2019",
DateINT: 190109,
Weekend: 0
},
{
Date: "1/10/2019",
DateINT: 190110,
Weekend: 0
},
{
Date: "1/11/2019",
DateINT: 190111,
Weekend: 0
},
{
Date: "1/12/2019",
DateINT: 190112,
Weekend: 1
},
{
Date: "1/13/2019",
DateINT: 190113,
Weekend: 1
},
{
Date: "1/14/2019",
DateINT: 190114,
Weekend: 0
},
{
Date: "1/15/2019",
DateINT: 190115,
Weekend: 0
},
{
Date: "1/16/2019",
DateINT: 190116,
Weekend: 0
},
{
Date: "1/17/2019",
DateINT: 190117,
Weekend: 0
},
{
Date: "1/18/2019",
DateINT: 190118,
Weekend: 0
},
{
Date: "1/19/2019",
DateINT: 190119,
Weekend: 1
},
{
Date: "1/20/2019",
DateINT: 190120,
Weekend: 1
},
{
Date: "1/21/2019",
DateINT: 190121,
Weekend: 0
},
{
Date: "1/22/2019",
DateINT: 190122,
Weekend: 0
},
{
Date: "1/23/2019",
DateINT: 190123,
Weekend: 0
},
{
Date: "1/24/2019",
DateINT: 190124,
Weekend: 0
},
{
Date: "1/25/2019",
DateINT: 190125,
Weekend: 0
},
{
Date: "1/26/2019",
DateINT: 190126,
Weekend: 1
},
{
Date: "1/27/2019",
DateINT: 190127,
Weekend: 1
},
{
Date: "1/28/2019",
DateINT: 190128,
Weekend: 0
},
{
Date: "1/29/2019",
DateINT: 190129,
Weekend: 0
},
{
Date: "1/30/2019",
DateINT: 190130,
Weekend: 0
},
{
Date: "1/31/2019",
DateINT: 190131,
Weekend: 0
},
{
Date: "2/1/2019",
DateINT: 190201,
Weekend: 0
},
{
Date: "2/2/2019",
DateINT: 190202,
Weekend: 1
},
{
Date: "2/3/2019",
DateINT: 190203,
Weekend: 1
},
{
Date: "2/4/2019",
DateINT: 190204,
Weekend: 0
},
{
Date: "2/5/2019",
DateINT: 190205,
Weekend: 0
},
{
Date: "2/6/2019",
DateINT: 190206,
Weekend: 0
},
{
Date: "2/7/2019",
DateINT: 190207,
Weekend: 0
},
{
Date: "2/8/2019",
DateINT: 190208,
Weekend: 0
},
{
Date: "2/9/2019",
DateINT: 190209,
Weekend: 1
},
{
Date: "2/10/2019",
DateINT: 190210,
Weekend: 1
},
{
Date: "2/11/2019",
DateINT: 190211,
Weekend: 0
},
{
Date: "2/12/2019",
DateINT: 190212,
Weekend: 0
},
{
Date: "2/13/2019",
DateINT: 190213,
Weekend: 0
},
{
Date: "2/14/2019",
DateINT: 190214,
Weekend: 0
},
{
Date: "2/15/2019",
DateINT: 190215,
Weekend: 0
},
{
Date: "2/16/2019",
DateINT: 190216,
Weekend: 1
},
{
Date: "2/17/2019",
DateINT: 190217,
Weekend: 1
},
{
Date: "2/18/2019",
DateINT: 190218,
Weekend: 0
},
{
Date: "2/19/2019",
DateINT: 190219,
Weekend: 0
},
{
Date: "2/20/2019",
DateINT: 190220,
Weekend: 0
},
{
Date: "2/21/2019",
DateINT: 190221,
Weekend: 0
},
{
Date: "2/22/2019",
DateINT: 190222,
Weekend: 0
},
{
Date: "2/23/2019",
DateINT: 190223,
Weekend: 1
},
{
Date: "2/24/2019",
DateINT: 190224,
Weekend: 1
},
{
Date: "2/25/2019",
DateINT: 190225,
Weekend: 0
},
{
Date: "2/26/2019",
DateINT: 190226,
Weekend: 0
},
{
Date: "2/27/2019",
DateINT: 190227,
Weekend: 0
},
{
Date: "2/28/2019",
DateINT: 190228,
Weekend: 0
},
{
Date: "3/1/2019",
DateINT: 190301,
Weekend: 0
},
{
Date: "3/2/2019",
DateINT: 190302,
Weekend: 1
},
{
Date: "3/3/2019",
DateINT: 190303,
Weekend: 1
},
{
Date: "3/4/2019",
DateINT: 190304,
Weekend: 0
},
{
Date: "3/5/2019",
DateINT: 190305,
Weekend: 0
},
{
Date: "3/6/2019",
DateINT: 190306,
Weekend: 0
},
{
Date: "3/7/2019",
DateINT: 190307,
Weekend: 0
},
{
Date: "3/8/2019",
DateINT: 190308,
Weekend: 0
},
{
Date: "3/9/2019",
DateINT: 190309,
Weekend: 1
},
{
Date: "3/10/2019",
DateINT: 190310,
Weekend: 1
},
{
Date: "3/11/2019",
DateINT: 190311,
Weekend: 0
},
{
Date: "3/12/2019",
DateINT: 190312,
Weekend: 0
},
{
Date: "3/13/2019",
DateINT: 190313,
Weekend: 0
},
{
Date: "3/14/2019",
DateINT: 190314,
Weekend: 0
},
{
Date: "3/15/2019",
DateINT: 190315,
Weekend: 0
},
{
Date: "3/16/2019",
DateINT: 190316,
Weekend: 1
},
{
Date: "3/17/2019",
DateINT: 190317,
Weekend: 1
},
{
Date: "3/18/2019",
DateINT: 190318,
Weekend: 0
},
{
Date: "3/19/2019",
DateINT: 190319,
Weekend: 0
},
{
Date: "3/20/2019",
DateINT: 190320,
Weekend: 0
},
{
Date: "3/21/2019",
DateINT: 190321,
Weekend: 0
},
{
Date: "3/22/2019",
DateINT: 190322,
Weekend: 0
},
{
Date: "3/23/2019",
DateINT: 190323,
Weekend: 1
},
{
Date: "3/24/2019",
DateINT: 190324,
Weekend: 1
},
{
Date: "3/25/2019",
DateINT: 190325,
Weekend: 0
},
{
Date: "3/26/2019",
DateINT: 190326,
Weekend: 0
},
{
Date: "3/27/2019",
DateINT: 190327,
Weekend: 0
},
{
Date: "3/28/2019",
DateINT: 190328,
Weekend: 0
},
{
Date: "3/29/2019",
DateINT: 190329,
Weekend: 0
},
{
Date: "3/30/2019",
DateINT: 190330,
Weekend: 1
},
{
Date: "3/31/2019",
DateINT: 190331,
Weekend: 1
},
{
Date: "4/1/2019",
DateINT: 190401,
Weekend: 0
},
{
Date: "4/2/2019",
DateINT: 190402,
Weekend: 0
},
{
Date: "4/3/2019",
DateINT: 190403,
Weekend: 0
},
{
Date: "4/4/2019",
DateINT: 190404,
Weekend: 0
},
{
Date: "4/5/2019",
DateINT: 190405,
Weekend: 0
},
{
Date: "4/6/2019",
DateINT: 190406,
Weekend: 1
},
{
Date: "4/7/2019",
DateINT: 190407,
Weekend: 1
},
{
Date: "4/8/2019",
DateINT: 190408,
Weekend: 0
},
{
Date: "4/9/2019",
DateINT: 190409,
Weekend: 0
},
{
Date: "4/10/2019",
DateINT: 190410,
Weekend: 0
},
{
Date: "4/11/2019",
DateINT: 190411,
Weekend: 0
},
{
Date: "4/12/2019",
DateINT: 190412,
Weekend: 0
},
{
Date: "4/13/2019",
DateINT: 190413,
Weekend: 1
},
{
Date: "4/14/2019",
DateINT: 190414,
Weekend: 1
},
{
Date: "4/15/2019",
DateINT: 190415,
Weekend: 0
},
{
Date: "4/16/2019",
DateINT: 190416,
Weekend: 0
},
{
Date: "4/17/2019",
DateINT: 190417,
Weekend: 0
},
{
Date: "4/18/2019",
DateINT: 190418,
Weekend: 0
},
{
Date: "4/19/2019",
DateINT: 190419,
Weekend: 0
},
{
Date: "4/20/2019",
DateINT: 190420,
Weekend: 1
},
{
Date: "4/21/2019",
DateINT: 190421,
Weekend: 1
},
{
Date: "4/22/2019",
DateINT: 190422,
Weekend: 0
},
{
Date: "4/23/2019",
DateINT: 190423,
Weekend: 0
},
{
Date: "4/24/2019",
DateINT: 190424,
Weekend: 0
},
{
Date: "4/25/2019",
DateINT: 190425,
Weekend: 0
},
{
Date: "4/26/2019",
DateINT: 190426,
Weekend: 0
},
{
Date: "4/27/2019",
DateINT: 190427,
Weekend: 1
},
{
Date: "4/28/2019",
DateINT: 190428,
Weekend: 1
},
{
Date: "4/29/2019",
DateINT: 190429,
Weekend: 0
},
{
Date: "4/30/2019",
DateINT: 190430,
Weekend: 0
},
{
Date: "5/1/2019",
DateINT: 190501,
Weekend: 0
},
{
Date: "5/2/2019",
DateINT: 190502,
Weekend: 0
},
{
Date: "5/3/2019",
DateINT: 190503,
Weekend: 0
},
{
Date: "5/4/2019",
DateINT: 190504,
Weekend: 1
},
{
Date: "5/5/2019",
DateINT: 190505,
Weekend: 1
},
{
Date: "5/6/2019",
DateINT: 190506,
Weekend: 0
},
{
Date: "5/7/2019",
DateINT: 190507,
Weekend: 0
},
{
Date: "5/8/2019",
DateINT: 190508,
Weekend: 0
},
{
Date: "5/9/2019",
DateINT: 190509,
Weekend: 0
},
{
Date: "5/10/2019",
DateINT: 190510,
Weekend: 0
},
{
Date: "5/11/2019",
DateINT: 190511,
Weekend: 1
},
{
Date: "5/12/2019",
DateINT: 190512,
Weekend: 1
},
{
Date: "5/13/2019",
DateINT: 190513,
Weekend: 0
},
{
Date: "5/14/2019",
DateINT: 190514,
Weekend: 0
},
{
Date: "5/15/2019",
DateINT: 190515,
Weekend: 0
},
{
Date: "5/16/2019",
DateINT: 190516,
Weekend: 0
},
{
Date: "5/17/2019",
DateINT: 190517,
Weekend: 0
},
{
Date: "5/18/2019",
DateINT: 190518,
Weekend: 1
},
{
Date: "5/19/2019",
DateINT: 190519,
Weekend: 1
},
{
Date: "5/20/2019",
DateINT: 190520,
Weekend: 0
},
{
Date: "5/21/2019",
DateINT: 190521,
Weekend: 0
},
{
Date: "5/22/2019",
DateINT: 190522,
Weekend: 0
},
{
Date: "5/23/2019",
DateINT: 190523,
Weekend: 0
},
{
Date: "5/24/2019",
DateINT: 190524,
Weekend: 0
},
{
Date: "5/25/2019",
DateINT: 190525,
Weekend: 1
},
{
Date: "5/26/2019",
DateINT: 190526,
Weekend: 1
},
{
Date: "5/27/2019",
DateINT: 190527,
Weekend: 0
},
{
Date: "5/28/2019",
DateINT: 190528,
Weekend: 0
},
{
Date: "5/29/2019",
DateINT: 190529,
Weekend: 0
},
{
Date: "5/30/2019",
DateINT: 190530,
Weekend: 0
},
{
Date: "5/31/2019",
DateINT: 190531,
Weekend: 0
},
{
Date: "6/1/2019",
DateINT: 190601,
Weekend: 1
},
{
Date: "6/2/2019",
DateINT: 190602,
Weekend: 1
},
{
Date: "6/3/2019",
DateINT: 190603,
Weekend: 0
},
{
Date: "6/4/2019",
DateINT: 190604,
Weekend: 0
},
{
Date: "6/5/2019",
DateINT: 190605,
Weekend: 0
},
{
Date: "6/6/2019",
DateINT: 190606,
Weekend: 0
},
{
Date: "6/7/2019",
DateINT: 190607,
Weekend: 0
},
{
Date: "6/8/2019",
DateINT: 190608,
Weekend: 1
},
{
Date: "6/9/2019",
DateINT: 190609,
Weekend: 1
},
{
Date: "6/10/2019",
DateINT: 190610,
Weekend: 0
},
{
Date: "6/11/2019",
DateINT: 190611,
Weekend: 0
},
{
Date: "6/12/2019",
DateINT: 190612,
Weekend: 0
},
{
Date: "6/13/2019",
DateINT: 190613,
Weekend: 0
},
{
Date: "6/14/2019",
DateINT: 190614,
Weekend: 0
},
{
Date: "6/15/2019",
DateINT: 190615,
Weekend: 1
},
{
Date: "6/16/2019",
DateINT: 190616,
Weekend: 1
},
{
Date: "6/17/2019",
DateINT: 190617,
Weekend: 0
},
{
Date: "6/18/2019",
DateINT: 190618,
Weekend: 0
},
{
Date: "6/19/2019",
DateINT: 190619,
Weekend: 0
},
{
Date: "6/20/2019",
DateINT: 190620,
Weekend: 0
},
{
Date: "6/21/2019",
DateINT: 190621,
Weekend: 0
},
{
Date: "6/22/2019",
DateINT: 190622,
Weekend: 1
},
{
Date: "6/23/2019",
DateINT: 190623,
Weekend: 1
},
{
Date: "6/24/2019",
DateINT: 190624,
Weekend: 0
},
{
Date: "6/25/2019",
DateINT: 190625,
Weekend: 0
},
{
Date: "6/26/2019",
DateINT: 190626,
Weekend: 0
},
{
Date: "6/27/2019",
DateINT: 190627,
Weekend: 0
},
{
Date: "6/28/2019",
DateINT: 190628,
Weekend: 0
},
{
Date: "6/29/2019",
DateINT: 190629,
Weekend: 1
},
{
Date: "6/30/2019",
DateINT: 190630,
Weekend: 1
},
{
Date: "7/1/2019",
DateINT: 190701,
Weekend: 0
},
{
Date: "7/2/2019",
DateINT: 190702,
Weekend: 0
},
{
Date: "7/3/2019",
DateINT: 190703,
Weekend: 0
},
{
Date: "7/4/2019",
DateINT: 190704,
Weekend: 0
},
{
Date: "7/5/2019",
DateINT: 190705,
Weekend: 0
},
{
Date: "7/6/2019",
DateINT: 190706,
Weekend: 1
},
{
Date: "7/7/2019",
DateINT: 190707,
Weekend: 1
},
{
Date: "7/8/2019",
DateINT: 190708,
Weekend: 0
},
{
Date: "7/9/2019",
DateINT: 190709,
Weekend: 0
},
{
Date: "7/10/2019",
DateINT: 190710,
Weekend: 0
},
{
Date: "7/11/2019",
DateINT: 190711,
Weekend: 0
},
{
Date: "7/12/2019",
DateINT: 190712,
Weekend: 0
},
{
Date: "7/13/2019",
DateINT: 190713,
Weekend: 1
},
{
Date: "7/14/2019",
DateINT: 190714,
Weekend: 1
},
{
Date: "7/15/2019",
DateINT: 190715,
Weekend: 0
},
{
Date: "7/16/2019",
DateINT: 190716,
Weekend: 0
},
{
Date: "7/17/2019",
DateINT: 190717,
Weekend: 0
},
{
Date: "7/18/2019",
DateINT: 190718,
Weekend: 0
},
{
Date: "7/19/2019",
DateINT: 190719,
Weekend: 0
},
{
Date: "7/20/2019",
DateINT: 190720,
Weekend: 1
},
{
Date: "7/21/2019",
DateINT: 190721,
Weekend: 1
},
{
Date: "7/22/2019",
DateINT: 190722,
Weekend: 0
},
{
Date: "7/23/2019",
DateINT: 190723,
Weekend: 0
},
{
Date: "7/24/2019",
DateINT: 190724,
Weekend: 0
},
{
Date: "7/25/2019",
DateINT: 190725,
Weekend: 0
},
{
Date: "7/26/2019",
DateINT: 190726,
Weekend: 0
},
{
Date: "7/27/2019",
DateINT: 190727,
Weekend: 1
},
{
Date: "7/28/2019",
DateINT: 190728,
Weekend: 1
},
{
Date: "7/29/2019",
DateINT: 190729,
Weekend: 0
},
{
Date: "7/30/2019",
DateINT: 190730,
Weekend: 0
},
{
Date: "7/31/2019",
DateINT: 190731,
Weekend: 0
},
{
Date: "8/1/2019",
DateINT: 190801,
Weekend: 0
},
{
Date: "8/2/2019",
DateINT: 190802,
Weekend: 0
},
{
Date: "8/3/2019",
DateINT: 190803,
Weekend: 1
},
{
Date: "8/4/2019",
DateINT: 190804,
Weekend: 1
},
{
Date: "8/5/2019",
DateINT: 190805,
Weekend: 0
},
{
Date: "8/6/2019",
DateINT: 190806,
Weekend: 0
},
{
Date: "8/7/2019",
DateINT: 190807,
Weekend: 0
},
{
Date: "8/8/2019",
DateINT: 190808,
Weekend: 0
},
{
Date: "8/9/2019",
DateINT: 190809,
Weekend: 0
},
{
Date: "8/10/2019",
DateINT: 190810,
Weekend: 1
},
{
Date: "8/11/2019",
DateINT: 190811,
Weekend: 1
},
{
Date: "8/12/2019",
DateINT: 190812,
Weekend: 0
},
{
Date: "8/13/2019",
DateINT: 190813,
Weekend: 0
},
{
Date: "8/14/2019",
DateINT: 190814,
Weekend: 0
},
{
Date: "8/15/2019",
DateINT: 190815,
Weekend: 0
},
{
Date: "8/16/2019",
DateINT: 190816,
Weekend: 0
},
{
Date: "8/17/2019",
DateINT: 190817,
Weekend: 1
},
{
Date: "8/18/2019",
DateINT: 190818,
Weekend: 1
},
{
Date: "8/19/2019",
DateINT: 190819,
Weekend: 0
},
{
Date: "8/20/2019",
DateINT: 190820,
Weekend: 0
},
{
Date: "8/21/2019",
DateINT: 190821,
Weekend: 0
},
{
Date: "8/22/2019",
DateINT: 190822,
Weekend: 0
},
{
Date: "8/23/2019",
DateINT: 190823,
Weekend: 0
},
{
Date: "8/24/2019",
DateINT: 190824,
Weekend: 1
},
{
Date: "8/25/2019",
DateINT: 190825,
Weekend: 1
},
{
Date: "8/26/2019",
DateINT: 190826,
Weekend: 0
},
{
Date: "8/27/2019",
DateINT: 190827,
Weekend: 0
},
{
Date: "8/28/2019",
DateINT: 190828,
Weekend: 0
},
{
Date: "8/29/2019",
DateINT: 190829,
Weekend: 0
},
{
Date: "8/30/2019",
DateINT: 190830,
Weekend: 0
},
{
Date: "8/31/2019",
DateINT: 190831,
Weekend: 1
},
{
Date: "9/1/2019",
DateINT: 190901,
Weekend: 1
},
{
Date: "9/2/2019",
DateINT: 190902,
Weekend: 0
},
{
Date: "9/3/2019",
DateINT: 190903,
Weekend: 0
},
{
Date: "9/4/2019",
DateINT: 190904,
Weekend: 0
},
{
Date: "9/5/2019",
DateINT: 190905,
Weekend: 0
},
{
Date: "9/6/2019",
DateINT: 190906,
Weekend: 0
},
{
Date: "9/7/2019",
DateINT: 190907,
Weekend: 1
},
{
Date: "9/8/2019",
DateINT: 190908,
Weekend: 1
},
{
Date: "9/9/2019",
DateINT: 190909,
Weekend: 0
},
{
Date: "9/10/2019",
DateINT: 190910,
Weekend: 0
},
{
Date: "9/11/2019",
DateINT: 190911,
Weekend: 0
},
{
Date: "9/12/2019",
DateINT: 190912,
Weekend: 0
},
{
Date: "9/13/2019",
DateINT: 190913,
Weekend: 0
},
{
Date: "9/14/2019",
DateINT: 190914,
Weekend: 1
},
{
Date: "9/15/2019",
DateINT: 190915,
Weekend: 1
},
{
Date: "9/16/2019",
DateINT: 190916,
Weekend: 0
},
{
Date: "9/17/2019",
DateINT: 190917,
Weekend: 0
},
{
Date: "9/18/2019",
DateINT: 190918,
Weekend: 0
},
{
Date: "9/19/2019",
DateINT: 190919,
Weekend: 0
},
{
Date: "9/20/2019",
DateINT: 190920,
Weekend: 0
},
{
Date: "9/21/2019",
DateINT: 190921,
Weekend: 1
},
{
Date: "9/22/2019",
DateINT: 190922,
Weekend: 1
},
{
Date: "9/23/2019",
DateINT: 190923,
Weekend: 0
},
{
Date: "9/24/2019",
DateINT: 190924,
Weekend: 0
},
{
Date: "9/25/2019",
DateINT: 190925,
Weekend: 0
},
{
Date: "9/26/2019",
DateINT: 190926,
Weekend: 0
},
{
Date: "9/27/2019",
DateINT: 190927,
Weekend: 0
},
{
Date: "9/28/2019",
DateINT: 190928,
Weekend: 1
},
{
Date: "9/29/2019",
DateINT: 190929,
Weekend: 1
},
{
Date: "9/30/2019",
DateINT: 190930,
Weekend: 0
},
{
Date: "10/1/2019",
DateINT: 191001,
Weekend: 0
},
{
Date: "10/2/2019",
DateINT: 191002,
Weekend: 0
},
{
Date: "10/3/2019",
DateINT: 191003,
Weekend: 0
},
{
Date: "10/4/2019",
DateINT: 191004,
Weekend: 0
},
{
Date: "10/5/2019",
DateINT: 191005,
Weekend: 1
},
{
Date: "10/6/2019",
DateINT: 191006,
Weekend: 1
},
{
Date: "10/7/2019",
DateINT: 191007,
Weekend: 0
},
{
Date: "10/8/2019",
DateINT: 191008,
Weekend: 0
},
{
Date: "10/9/2019",
DateINT: 191009,
Weekend: 0
},
{
Date: "10/10/2019",
DateINT: 191010,
Weekend: 0
},
{
Date: "10/11/2019",
DateINT: 191011,
Weekend: 0
},
{
Date: "10/12/2019",
DateINT: 191012,
Weekend: 1
},
{
Date: "10/13/2019",
DateINT: 191013,
Weekend: 1
},
{
Date: "10/14/2019",
DateINT: 191014,
Weekend: 0
},
{
Date: "10/15/2019",
DateINT: 191015,
Weekend: 0
},
{
Date: "10/16/201",
DateINT: 191016,
Weekend: 0
},
{
Date: "10/17/2019",
DateINT: 191017,
Weekend: 0
},
{
Date: "10/18/2019",
DateINT: 191018,
Weekend: 0
},
{
Date: "10/19/2019",
DateINT: 191019,
Weekend: 1
},
{
Date: "10/20/2019",
DateINT: 191020,
Weekend: 1
},
{
Date: "10/21/2019",
DateINT: 191021,
Weekend: 0
},
{
Date: "10/22/2019",
DateINT: 191022,
Weekend: 0
},
{
Date: "10/23/2019",
DateINT: 191023,
Weekend: 0
},
{
Date: "10/24/2019",
DateINT: 191024,
Weekend: 0
},
{
Date: "10/25/2019",
DateINT: 191025,
Weekend: 0
},
{
Date: "10/26/201",
DateINT: 191026,
Weekend: 1
},
{
Date: "10/27/2019",
DateINT: 191027,
Weekend: 1
},
{
Date: "10/28/2019",
DateINT: 191028,
Weekend: 0
},
{
Date: "10/29/2019",
DateINT: 191029,
Weekend: 0
},
{
Date: "10/30/2019",
DateINT: 191030,
Weekend: 0
},
{
Date: "10/31/2019",
DateINT: 191031,
Weekend: 0
},
{
Date: "11/1/2019",
DateINT: 191101,
Weekend: 0
},
{
Date: "11/2/2019",
DateINT: 191102,
Weekend: 1
},
{
Date: "11/3/2019",
DateINT: 191103,
Weekend: 1
},
{
Date: "11/4/2019",
DateINT: 191104,
Weekend: 0
},
{
Date: "11/5/2019",
DateINT: 191105,
Weekend: 0
},
{
Date: "11/6/2019",
DateINT: 191106,
Weekend: 0
},
{
Date: "11/7/2019",
DateINT: 191107,
Weekend: 0
},
{
Date: "11/8/2019",
DateINT: 191108,
Weekend: 0
},
{
Date: "11/9/2019",
DateINT: 191109,
Weekend: 1
},
{
Date: "11/10/2019",
DateINT: 191110,
Weekend: 1
},
{
Date: "11/11/2019",
DateINT: 191111,
Weekend: 0
},
{
Date: "11/12/201",
DateINT: 191112,
Weekend: 0
},
{
Date: "11/13/201",
DateINT: 191113,
Weekend: 0
},
{
Date: "11/14/2019",
DateINT: 191114,
Weekend: 0
},
{
Date: "11/15/2019",
DateINT: 191115,
Weekend: 0
},
{
Date: "11/16/2019",
DateINT: 191116,
Weekend: 1
},
{
Date: "11/17/2019",
DateINT: 191117,
Weekend: 1
},
{
Date: "11/18/2019",
DateINT: 191118,
Weekend: 0
},
{
Date: "11/19/2019",
DateINT: 191119,
Weekend: 0
},
{
Date: "11/20/2019",
DateINT: 191120,
Weekend: 0
},
{
Date: "11/21/201",
DateINT: 191121,
Weekend: 0
},
{
Date: "11/22/2019",
DateINT: 191122,
Weekend: 0
},
{
Date: "11/23/2019",
DateINT: 191123,
Weekend: 1
},
{
Date: "11/24/2019",
DateINT: 191124,
Weekend: 1
},
{
Date: "11/25/2019",
DateINT: 191125,
Weekend: 0
},
{
Date: "11/26/2019",
DateINT: 191126,
Weekend: 0
},
{
Date: "11/27/2019",
DateINT: 191127,
Weekend: 0
},
{
Date: "11/28/2019",
DateINT: 191128,
Weekend: 0
},
{
Date: "11/29/201",
DateINT: 191129,
Weekend: 0
},
{
Date: "11/30/2019",
DateINT: 191130,
Weekend: 1
},
{
Date: "12/1/2019",
DateINT: 191201,
Weekend: 1
},
{
Date: "12/2/2019",
DateINT: 191202,
Weekend: 0
},
{
Date: "12/3/2019",
DateINT: 191203,
Weekend: 0
},
{
Date: "12/4/2019",
DateINT: 191204,
Weekend: 0
},
{
Date: "12/5/2019",
DateINT: 191205,
Weekend: 0
},
{
Date: "12/6/2019",
DateINT: 191206,
Weekend: 0
},
{
Date: "12/7/2019",
DateINT: 191207,
Weekend: 1
},
{
Date: "12/8/2019",
DateINT: 191208,
Weekend: 1
},
{
Date: "12/9/2019",
DateINT: 191209,
Weekend: 0
},
{
Date: "12/10/2019",
DateINT: 191210,
Weekend: 0
},
{
Date: "12/11/2019",
DateINT: 191211,
Weekend: 0
},
{
Date: "12/12/2019",
DateINT: 191212,
Weekend: 0
},
{
Date: "12/13/2019",
DateINT: 191213,
Weekend: 0
},
{
Date: "12/14/2019",
DateINT: 191214,
Weekend: 1
},
{
Date: "12/15/2019",
DateINT: 191215,
Weekend: 1
},
{
Date: "12/16/2019",
DateINT: 191216,
Weekend: 0
},
{
Date: "12/17/2019",
DateINT: 191217,
Weekend: 0
},
{
Date: "12/18/2019",
DateINT: 191218,
Weekend: 0
},
{
Date: "12/19/2019",
DateINT: 191219,
Weekend: 0
},
{
Date: "12/20/2019",
DateINT: 191220,
Weekend: 0
},
{
Date: "12/21/2019",
DateINT: 191221,
Weekend: 1
},
{
Date: "12/22/2019",
DateINT: 191222,
Weekend: 1
},
{
Date: "12/23/2019",
DateINT: 191223,
Weekend: 0
},
{
Date: "12/24/2019",
DateINT: 191224,
Weekend: 0
},
{
Date: "12/25/2019",
DateINT: 191225,
Weekend: 0
},
{
Date: "12/26/2019",
DateINT: 191226,
Weekend: 0
},
{
Date: "12/27/2019",
DateINT: 191227,
Weekend: 0
},
{
Date: "12/28/2019",
DateINT: 191228,
Weekend: 1
},
{
Date: "12/29/2019",
DateINT: 191229,
Weekend: 1
},
{
Date: "12/30/2019",
DateINT: 191230,
Weekend: 0
},
{
Date: "12/31/2019",
DateINT: 191231,
Weekend: 0
})(onStart)
The brains..
// Default variables
UpdateContext({holiday: ""});
UpdateContext({noWeekends: true});
UpdateContext({selectedCount:0});
UpdateContext({selectionStart:0});
UpdateContext({selectionEnd:0});
// Returns the current year. yyyy
UpdateContext({currentYear: Text( Now(), "[$-en-US]yyyy" )});
// Returns today. mm/dd/yyyy
UpdateContext({today:Today()});
// Returns the date for the first day of the month. mm/dd/yyyy
UpdateContext({firstDayOfMonth:
DateAdd(today,1-Day(today),Days)});
// Returns the date for the last Sunday of the previous month. mm/dd/yyyy
UpdateContext({firstDayInView:
DateAdd(firstDayOfMonth,-(Mod(Weekday(firstDayOfMonth)-2,7)+1),Days)});
// Returns the current month. Long format, March, 2019
UpdateContext({currMonth:
Text(firstDayOfMonth,"[$-en-US]mmmm, yyyy")});(onVisible on Screen1) *
// Holidays Collection
ClearCollect(colHolidays,
{ Description: "New Years Day", Date: DateValue("01/01/2019") },
{ Description: "Martin Luther King, Jr. Day", Date: DateValue("01/21/2019") },
{ Description: "George Washington’s Birthday", Date: DateValue("02/18/2019") },
{ Description: "Memorial Day", Date: DateValue("05/27/2019") },
{ Description: "Independence Day", Date: DateValue("07/04/2019") },
{ Description: "Labor Day", Date: DateValue("09/02/2019") },
{ Description: "Columbus Day", Date: DateValue("10/014/2019") },
{ Description: "Veterans Day", Date: DateValue("11/11/19") },
{ Description: "Thanksgiving Day", Date: DateValue("11/28/19") },
{ Description: "Christmas Day", Date: DateValue("12/25/19") }
)- You will need to create a second screen in order to trigger the onVisible
The calendar..
- Next we need to setup two blank gallery controls, one for the header which includes the days of the week.
- Make this a blank horizontal gallery
// Header
["Sun","Mon","Tue","Wed","Thu","Fri","Sat"]
(Set your items to this)
The calendar..
- A main gallery which will include the days of the month.
- Make this a blank vertical gallery
- Set the wrap count property for the main gallery to 7
// Calendar
[ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9,
10,11,12,13,14,15,16,17,18,19,
20,21,22,23,24,25,26,27,28,29,
30,31,32,33,34,35,36,37,38,39,
40,41](Set your items to this)
The calendar..
- Then we need to add a text label to each gallery. One for the header which simply displays the days of the week and one for the calendar itself which displays the calendar days correctly.
// Header
ThisItem.Value
// Calendar
Day(DateAdd(firstDayInView,ThisItem.Value,Days))(Set your text label to this)
The calendar..
- In the main gallery, on the text label we just added we need to add the following code to onSelect property as follows..
(Adding onSelect functionality)
// Returns the selected date. mm/dd/yyyy
UpdateContext({selectedDate:
DateAdd(firstDayInView,ThisItem.Value,Days)});
// Returns the selected dates number value between
// numbers 1 (Sunday) and 7 (Saturday).
UpdateContext({weekday:
Weekday(selectedDate)});If(
// If the selected date is in a holidays collection, do nothing
selectedDate in colHolidays.Date,
UpdateContext(
{
holiday: First(
Filter(
colHolidays,
selectedDate = Date
)
).Description
}
);
false,
// If the selected date is before the current day, do nothing
selectedDate < Today(),
false,
// If the selected day is = to 1 or 7 ( Weekend ), do nothing
weekday = 1 && noWeekends || weekday = 7 && noWeekends,
false,- Beneath this we are going to add a large if statement which will handle a couple of things.
// Get the first Selection (selectedCount = no value)
// and update selectedCount to 1
selectedCount = 0,
UpdateContext({
selectionStart: selectedDate,
selectionEnd: selectedDate,
selectedCount: 1,
holiday: ""
}),
// If first selection is made (selectedCount = 1),
// get the second one and updated selectedCount to 2
selectedCount = 1,
UpdateContext({
selectionStart: Min(selectionStart, selectedDate),
selectionEnd: Max(selectionStart, selectedDate),
selectedCount: 2,
holiday: ""
}),
// If you have selected more than twice, reset everything.
selectedCount = 2,
UpdateContext({
selectedCount: 0,
holiday: ""
})
)Getting the Date range..
- In order to get the date range we need to compare dates using a DateINT and not the date itself.
- In a button add this code to the onSelect property
// Returns dates
UpdateContext({
startDate : Text(selectionStart,"[$-en-US]mm/dd/yyyy"),
endDate : Text(selectionEnd,"[$-en-US]mm/dd/yyyy")
});
// Returns above date without slashes in reverse order e.g 190306
UpdateContext({
startDateINT :
Concatenate(Right(startDate,2),Left(startDate,2),Mid(startDate,4,2)),
endDateINT :
Concatenate(Right(endDate,2),Left(endDate,2),Mid(endDate,4,2))
});
// Returns the range of dates using the DateINT value
// Filtering the colDateLookup collection based on the noWeekends variable
If(
noWeekends,
ClearCollect(
colDateRange,
Filter(
colDateLookup,
DateINT >= Value(startDateINT),
DateINT <= Value(endDateINT),
Weekend = 0 )
),
ClearCollect(
colDateRange,
Filter(
colDateLookup,
DateINT >= Value(startDateINT),
DateINT <= Value(endDateINT)
)
)
);
// Remove Dates that are in the holidays collection
RemoveIf(colDateRange, Date in colHolidays.Date);
// Getting the number of days within the range
UpdateContext({numberOfDays: CountRows(colDateRange)})
UpdateContext({noWeekends: !noWeekends})Toggling weekends...
- To toggle the weekends, a radio control which toggles the noWeekends variable on and off.Add this code to its onChange property
(An easy step)
Look and feel...
- Now that we have the main functionality in place, it is time to work with look and feel so we can actually see what we are doing when we use the calendar.
- You can customize the following steps to your liking but we will add a shape to show holidays, a shape to show selection and finally an icon to show the current day. They will all be controlled by the Visible property.
(Making things look pretty)
// Color for weekend ( 1 & 7 ) when weekends are disabled
If(
Weekday(DateAdd(firstDayInView,ThisItem.Value,Days)) = 1 && noWeekends,
LightGray,
Weekday(DateAdd(firstDayInView,ThisItem.Value,Days)) = 7 && noWeekends,
LightGray
)- In order to visually display whether or not the weekends are included we can change the color property of the text label in the main gallery as follows
Weekends
- In the main gallery insert an icon ( we are using a simple square ) and customize it to visually your liking.
- Name it Holiday
- Add this code to the Visible property
Holidays
DateAdd(firstDayInView,ThisItem.Value,Days) in colHolidays.Date- It should now only visible on days which are holidays
Selected days
If(
// If you select dates with a holiday in between, hide the selection fill
Holiday.Visible,
false,
// Show the selection fill thats between the chosen dates that doesn't include weekends
noWeekends,
Weekday(DateAdd(firstDayInView,ThisItem.Value,Days)) <> 1 && noWeekends
&&
Weekday(DateAdd(firstDayInView,ThisItem.Value,Days)) <> 7 && noWeekends
&&
selectedCount > 0
&&
DateAdd(firstDayInView,ThisItem.Value,Days) >= selectionStart
&&
DateAdd(firstDayInView,ThisItem.Value,Days) <= selectionEnd,
// Show the selection fill thats between the chosen dates that includes weekends
selectedCount > 0
&& DateAdd(firstDayInView,ThisItem.Value,Days) >= selectionStart
&& DateAdd(firstDayInView,ThisItem.Value,Days) <= selectionEnd
)- Add another icon ( we are using a simple square again )
- Name it Selected and in its Visible property
Current day
- Add another icon ( we are using the 'more' icon here)
- Name it Today and in its Visible property
DateAdd(firstDayInView,ThisItem.Value,Days) = Today()Adding some color
- Go back to the holidays icon and add this code to the fill property
If(Selected.Visible, RGBA(0,0,0,0), Green)- Go back to the text label in the main gallery and append this code to the color property
,
Selected.Visible,
White,
Black
- For the today icon we use both color and fill.
- Add this code to the fill property
If(
IsToday(DateAdd(firstDayInView,ThisItem.Value,Days)),
RGBA(0,0,0,0)
)- Add this code to the color property
If(
Selected.Visible,
White,
Holiday.Visible,
White,
Gray
)Changing months...
- Changing between months is a relatively easy task, all we have to do is add two arrows, a left and right.
- Then in the onSelect property of each, add or subtract 1 month from the firstDayOfMonth variable we declared earlier.
- Subtracting a month (Add this to onStart)
// Update firstDayOfMonth to the next month by adding 1
UpdateContext({
firstDayOfMonth:DateAdd(firstDayOfMonth, -1, "Months")
});
// Update the firstDayInView to the last sunday of the previous Month.
UpdateContext({
firstDayInView:DateAdd(firstDayOfMonth,
-(Mod(Weekday(firstDayOfMonth)-2,7)+1),Days)
})
// Update firstDayOfMonth to the next month by adding 1
UpdateContext({
firstDayOfMonth:DateAdd(firstDayOfMonth,1, "Months")
});
// Update the firstDayInView to the last sunday of the previous Month.
UpdateContext({
firstDayInView:DateAdd(firstDayOfMonth,
-(Mod(Weekday(firstDayOfMonth)-2,7)+1),Days)
})
- Adding a month (Add this to onStart)
Adding a today button
- To do this, add a button and add the following code to the onSelect property. This code is the same as the onVisible from earlier.
// Returns today. mm/dd/yyyy
UpdateContext({today:Today()});
// Returns the date for the first day of the month. mm/dd/yyyy
UpdateContext({
firstDayOfMonth:DateAdd(today,1-Day(today),Days)
});
// Returns the date for the last Sunday of the previous month. mm/dd/yyyy
UpdateContext({
firstDayInView:DateAdd(firstDayOfMonth,
-(Mod(Weekday(firstDayOfMonth)-2,7)+1),Days)
});
// Returns the current month. Long format, March, 2019
UpdateContext({
currMonth: Text(firstDayOfMonth,"[$-en-US]mmmm, yyyy")
})Adding a month label
- We can add a month label to show the current month
- To do so, simply add a text label with the following code in its text property:
Text(firstDayOfMonth,"[$-en-US]mmmm, yyyy")Start Date, End Date, Number of Days
- Lets add three more labels and add the following code to each
If(selectionStart > 0, "Start Date: " & Text(selectionStart, LongDate), "")
If(selectionEnd > 0, "End Date: " & Text(selectionEnd,LongDate), "")
numberOfDays & " Days" Dog Tax.. ( George )
