# Generating & displaying a monthly shift roster

**URL:** <https://community.glideapps.com/t/generating-displaying-a-monthly-shift-roster/21708>\
**Category:** Ask for Help\
**Created:** [January 25, 2021, 10:48am UTC](https://community.glideapps.com/t/generating-displaying-a-monthly-shift-roster/21708 "2021-01-25T10:48:31Z")\
**Posts on this page:** 20\
**Page:** 3

<div class="post-metadata">

**Author:** ![Jeff\_Hager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeff_hager/32/43_2.png) [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)\
**Post date:** [January 27, 2021, 2:02am UTC](https://community.glideapps.com/t/generating-displaying-a-monthly-shift-roster/21708/41 "2021-01-27T02:02:37Z")

</div>

Thank you! I think that was my attempt at a staff scheduler a while back, which ended up becoming a calendar with half a$$ed multi day capabilities. Now that it’s resurfaced, I might have to throw some new ideas at it. I’d like to merge it somehow with the month layout.

---

<div class="post-metadata">

**Author:** ![Wiz.Wazeer](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/wiz.wazeer/32/72423_2.png) [@Wiz.Wazeer](https://community.glideapps.com/u/Wiz.Wazeer)\
**Post date:** [January 27, 2021, 3:00am UTC](https://community.glideapps.com/t/generating-displaying-a-monthly-shift-roster/21708/42 "2021-01-27T03:00:52Z")

</div>

Lovely stuff and 😂 @ a$$ed. I’m so exited I don’t know where to start with this. I’ve few concepts I can bring to life now.

I’m going to merge it with the 31 day calendar. I know that I can do but weekday one I could too. Let me get the 31 out of the way. I’ll show you the result soon. Then I’m gonna work on the weekday layout. It’s the CSS. I have to avoid it. I was so glued to Roberts css at one point I’d forgotten about the template store rules. Then reality knocked. But just for the fun of it I’m going to try.

---

<div class="post-metadata">

**Author:** ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)\
**Post date:** [January 27, 2021, 3:06am UTC](https://community.glideapps.com/t/generating-displaying-a-monthly-shift-roster/21708/43 "2021-01-27T03:06:16Z")

</div>

I’m really pleased with the way this has turned out. I still have a bit of work to make it look a bit more presentable, but I think it’s a really solid solution that should be relatively low maintenance.

Kudos again to Jeff. As we say back home in Oz, the guy is a fair dinkum legend!

---

<div class="post-metadata">

**Author:** ![Wiz.Wazeer](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/wiz.wazeer/32/72423_2.png) [@Wiz.Wazeer](https://community.glideapps.com/u/Wiz.Wazeer)\
**Post date:** [January 27, 2021, 3:13am UTC](https://community.glideapps.com/t/generating-displaying-a-monthly-shift-roster/21708/44 "2021-01-27T03:13:24Z")

</div>

> [@Darren\_Murphy](#):
>
> the guy is a fair dinkum legend!

👍👍👍👍👍

---

<div class="post-metadata">

**Author:** ![Jeff\_Hager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeff_hager/32/43_2.png) [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)\
**Post date:** [January 27, 2021, 3:35am UTC](https://community.glideapps.com/t/generating-displaying-a-monthly-shift-roster/21708/45 "2021-01-27T03:35:48Z")

</div>

Well, I can definitely say that’s the first time I’ve been called that. 🙂 😄

---

<div class="post-metadata">

**Author:** ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)\
**Post date:** [January 27, 2021, 12:04pm UTC](https://community.glideapps.com/t/generating-displaying-a-monthly-shift-roster/21708/46 "2021-01-27T12:04:05Z")

</div>

@Jeff_Hager - I think you’ll like this…

Was going backwards and forwards with the customer today - kept changing their minds about shift code colours. This started doing my head in, so eventually I did this:

- Gave the customer a sheet that looks like this:

 ![Screen Shot 2021-01-27 at 7.53.10 PM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/6/a/6acba83201225b9c2e93ca0813399daa3670daa9.png)

- And told him to go to town on it 😁
- While he was busy doing that, I wrote this little code snippet…

```auto
function build_css_classes() {
  var ss = SpreadsheetApp.getActiveSpreadsheet();
  var sheet = ss.getSheetByName('Shift Code Map');
  var range = ss.getRangeByName('ShiftCodes');
  var classes = [];
  var row = 1;
  var last_row = range.getLastRow();
  while (row < last_row) {
    var text_color = range.getCell(row,4).getFontColor();
    var bg_color = range.getCell(row,4).getBackground();
    var class_name = range.getCell(row,5).getValue();
    var this_class = '.' + class_name + ' { ' +
      'border-radius:25px; ' +
      'background-color: ' + bg_color + '; ' +
      'color: ' + text_color + ' !important; ' +

      'font-weight: 700; ' +
      'cursor: pointer; }';
    classes.push([this_class]);
    row++;
  }
  sheet.getRange(2,6,sheet.getLastRow()-1,1).setValues(classes);
}

```

… you can probably see where this is going 😉

- The above code populates an extra column in the above sheet like so:  
 ![Screen Shot 2021-01-27 at 7.56.20 PM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/4/d/4ddbc95a3674d5e8393a590f49503f058ac33cd3.png)
- A Joined List column and another Template column later - magic auto-generated CSS classes 🤣 🤣 🤣

Here’s a couple of screen grabs of the current iteration:

 ![Screen Shot 2021-01-27 at 8.00.00 PM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/d/b/db4da82c5ee77113e56fa67a57813b088f3e876c.jpeg)

 ![Screen Shot 2021-01-27 at 8.00.24 PM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/f/c/fc8096c73a771e3322b5aaaaceb80d7059fa2ae2.png)

---

<div class="post-metadata">

**Author:** ![Jeff\_Hager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeff_hager/32/43_2.png) [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)\
**Post date:** [January 27, 2021, 1:15pm UTC](https://community.glideapps.com/t/generating-displaying-a-monthly-shift-roster/21708/47 "2021-01-27T13:15:58Z")

</div>

Yeah, there you go! Makes your life easier.

---

<div class="post-metadata">

**Author:** ![Wiz.Wazeer](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/wiz.wazeer/32/72423_2.png) [@Wiz.Wazeer](https://community.glideapps.com/u/Wiz.Wazeer)\
**Post date:** [January 27, 2021, 1:30pm UTC](https://community.glideapps.com/t/generating-displaying-a-monthly-shift-roster/21708/48 "2021-01-27T13:30:28Z")

</div>

Wow! Brilliant!

---

<div class="post-metadata">

**Author:** ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)\
**Post date:** [January 27, 2021, 3:00pm UTC](https://community.glideapps.com/t/generating-displaying-a-monthly-shift-roster/21708/49 "2021-01-27T15:00:27Z")

</div>

Y’all are too smart for me 🙂

This is next level stuff. Nicely done you two.

---

<div class="post-metadata">

**Author:** ![Wiz.Wazeer](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/wiz.wazeer/32/72423_2.png) [@Wiz.Wazeer](https://community.glideapps.com/u/Wiz.Wazeer)\
**Post date:** [January 27, 2021, 10:23pm UTC](https://community.glideapps.com/t/generating-displaying-a-monthly-shift-roster/21708/50 "2021-01-27T22:23:01Z")

</div>

@Jeff_Hager & @Darren_Murphy Here check this out pls

I have merged it with the calendar but not weekdays.

> **[Copy of Calendar Concept](https://hypnotic-sand-8309.glideapp.io/)**

Each worker has their own view of the calendar and availability

---

<div class="post-metadata">

**Author:** ![Jeff\_Hager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeff_hager/32/43_2.png) [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)\
**Post date:** [January 27, 2021, 10:34pm UTC](https://community.glideapps.com/t/generating-displaying-a-monthly-shift-roster/21708/51 "2021-01-27T22:34:42Z")

</div>

Hmmm that gave me an idea 💡 to combine your version with mine. I was brainstorming ways to make the days clickable, but I think with a little more CSS, we could hack the list version you made to be 7 wide. (I think I remember someone doing that a while back). I got some playing to do.

---

<div class="post-metadata">

**Author:** ![Wiz.Wazeer](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/wiz.wazeer/32/72423_2.png) [@Wiz.Wazeer](https://community.glideapps.com/u/Wiz.Wazeer)\
**Post date:** [January 27, 2021, 10:36pm UTC](https://community.glideapps.com/t/generating-displaying-a-monthly-shift-roster/21708/52 "2021-01-27T22:36:16Z")

</div>

Yes! pls Jeff…you can pull it off , I know!

I think the weekdays is going to be hard for me…because of the CSS. I need an inline list.

---

<div class="post-metadata">

**Author:** ![Wiz.Wazeer](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/wiz.wazeer/32/72423_2.png) [@Wiz.Wazeer](https://community.glideapps.com/u/Wiz.Wazeer)\
**Post date:** [January 28, 2021, 2:16pm UTC](https://community.glideapps.com/t/generating-displaying-a-monthly-shift-roster/21708/53 "2021-01-28T14:16:28Z")

</div>

@Jeff_Hager You have done an all events relation…this is great! Can give admin a birds eye view of everything

Thank you!  
Great stuff!

---

<div class="post-metadata">

**Author:** ![Wiz.Wazeer](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/wiz.wazeer/32/72423_2.png) [@Wiz.Wazeer](https://community.glideapps.com/u/Wiz.Wazeer)\
**Post date:** [April 21, 2021, 2:30am UTC](https://community.glideapps.com/t/generating-displaying-a-monthly-shift-roster/21708/54 "2021-04-21T02:30:06Z")

</div>

@Jeff_Hager I have managed to make your calendar clickable without creating any relations and reset the days too in one single swoop. I’ll show you the demo soon. One thing I was thinking of adding but cant get the weekdays or m-days to recognise are the days …I have tried this with weeksdays, weekday-position…and ofcourse sun as 1, mon as 2…but not working for some reason. What am I doing wrong, pls?

---

<div class="post-metadata">

**Author:** ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)\
**Post date:** [April 21, 2021, 2:43am UTC](https://community.glideapps.com/t/generating-displaying-a-monthly-shift-roster/21708/55 "2021-04-21T02:43:29Z")

</div>

@Wiz.Wazeer you mean this?

> [@Darren\_Murphy](#):
>
> Incidentally, getting the first day of the month positioned correctly turned out to be remarkably simple.  
> I already had the date of the first of the month from the source sheet, so all I had to do was convert that to a date object, and call `getDay()` on it. `getDay()` returns an integer representing the day of the week. And because it conveniently starts at Sunday = 0, whatever number it returned was _precisely_ how many empty divs I needed at the start of the roster string.
> 
> So, as I started building the roster for each worker, it was just a matter of:
> 
> ```auto
> var code_string = '';
> code_string += blank_div.repeat(blank_days);
> 
> ```

---

<div class="post-metadata">

**Author:** ![Wiz.Wazeer](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/wiz.wazeer/32/72423_2.png) [@Wiz.Wazeer](https://community.glideapps.com/u/Wiz.Wazeer)\
**Post date:** [April 21, 2021, 2:52am UTC](https://community.glideapps.com/t/generating-displaying-a-monthly-shift-roster/21708/56 "2021-04-21T02:52:04Z")

</div>

Huh, so sunday now is 0? lol…I am going to back to scool (no h)! @Darren_Murphy you are using a script? Can we not do it in the editor (well so far I have not had any luck-lol)…

---

<div class="post-metadata">

**Author:** ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)\
**Post date:** [April 21, 2021, 2:59am UTC](https://community.glideapps.com/t/generating-displaying-a-monthly-shift-roster/21708/57 "2021-04-21T02:59:14Z")

</div>

yeah, my whole roster (including all the CSS classes) is script-generated. Definitely possible to figure out the correct starting position using GDE date math, but not simple. I won’t try and offer a solution, as I’ll just embarrass myself 🤣 Best to wait for Jeff…

By the way, this roster part of my app has been chugging away now for almost 3 months, and it’s turned out to be a great solution. Monthly shift rosters are automagically updated for 400+ workers on a daily basis, and I never have to touch it.  
It. Just. works.

---

<div class="post-metadata">

**Author:** ![Wiz.Wazeer](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/wiz.wazeer/32/72423_2.png) [@Wiz.Wazeer](https://community.glideapps.com/u/Wiz.Wazeer)\
**Post date:** [April 21, 2021, 3:07am UTC](https://community.glideapps.com/t/generating-displaying-a-monthly-shift-roster/21708/58 "2021-04-21T03:07:04Z")

</div>

Really? Don’t tempt please…you know I will go for it. After talking to you the other day, I searched for a formula (couldnt do it in glide) and found a really good one that gets me all the ranges between two dates regardless of when the dates occur…really cool solution…and now I am able to show all dates not just arrival/departure dates on @Jeff_Hager calendar. But you are tempting to me go for the script now…while we are at this…have you had to recently refresh your app or reload the editor to see your script data…I don’t know why but I am even experiencing significant lags in the editor processing data. Something’s not right but Glide is asking for too much from us to fix their problems. Video etc. So I will wait for the glitch to self-fix lol!

---

<div class="post-metadata">

**Author:** ![zeki](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/zeki/32/9068_2.png) [@zeki](https://community.glideapps.com/u/zeki)\
**Post date:** [July 3, 2021, 11:59am UTC](https://community.glideapps.com/t/generating-displaying-a-monthly-shift-roster/21708/59 "2021-07-03T11:59:47Z")

</div>

What an amazing workaround !

---

<div class="post-metadata">

**Author:** ![Darko\_Vukoje](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darko_vukoje/32/73227_2.png) [@Darko\_Vukoje](https://community.glideapps.com/u/Darko_Vukoje)\
**Post date:** [May 8, 2024, 3:37pm UTC](https://community.glideapps.com/t/generating-displaying-a-monthly-shift-roster/21708/60 "2024-05-08T15:37:53Z")

</div>

this is amazing works. It looks very stylish.

I used Glide new table for this, but my app requires users to click on particular timeslot. I assume your calendar work just displays info, not catching events?

[Previous page](https://community.glideapps.com/t/generating-displaying-a-monthly-shift-roster/21708.md?page=2)

[Next page](https://community.glideapps.com/t/generating-displaying-a-monthly-shift-roster/21708.md?page=4)