SAMPLE APP: Crazy Calendar Hack

Here’s a new take on calendar views, based on some Virtual Column weirdness:

The sample app uses a public holiday calendar, and a WeekNum table with just two sheet columns:

https://www.appsheet.com/samples/Built-from-your-app-spec-?appGuidString=4fe2fb91-feca-4a6e-bee3-3ab092e96064

Here’s a quick overview of how it works:

I used a public/read-only calendar so I could post it as a sample. But you could do a lot more with it if you connect your personal calendar and create inline actions next to each date.

Unfortunately, that makes the calendar table twice as wide, for now…
shameless plug for my own feature request :sweat_smile:


This is a follow up to the first Crazy Calendar Hack, using a similar technique for Hours instead of WeekNums.

15 Likes

Hi @GreenFlux,

This is brilliant!
Thanks for sharing.

I would like to ask if you would know how I would have Sunday at the end of the week?

image image

In this image, the week starts on Sunday 2/7/20, but if it’s possible, is there something I could change to your sample app that will show the Sunday having a date of Saturday 2/12/20 +1?

Hope this makes sense.
Best,
Chris.

1 Like

Hey @Chris_Jeal , glad you like the sample app!

Changing the week to end on Sunday is a little tricky. I’m using WEEKNUM() which always starts on Sunday. I think you’d have to put in an exception for WEEKDAY()=7, and come up with a new [alt_weeknum] to group and filter the rows differently.

2 Likes

Thanks for the reply.
You’re not kidding there about the trickiness of this, I’ve been trying to tackle this one for a while now.
I’ve not thought about the alternate weeknum though so I’ll give it a go.

Thanks, and stay safe.
Chris.
:+1:

2 Likes

Nice!! Somehow I didn’t see this post when it was posted.

Played around a bit with it and made the dates on the right into an SVG through a virtual column:

5 Likes

Can you post the Appsheet based SVG expression?

Sure. Here’s the code with a bit of update:

CONCATENATE("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 480 120'>

--WEEK CIRCLE--
<circle cx=""60"" cy=""60"" r=""50"" fill=""rgb(3,123,228)"" stroke=""rgb(3,123,228)""  stroke-width=""12"" /> 

--WEEK NUMBERS--
<text x=""58""  font-family=""Roboto,Arial,sans-serif""  font-size=""60"" fill=""white""  y=""68%""  text-anchor=""middle"">
",RIGHT([Weeknum],LEN([Weeknum])-6),"
</text>

--TEXT STANDARD DAY_DATE--
<text font-family=""Roboto,Arial,sans-serif"" font-size=""65""   text-anchor=""left"" fill=""black"" x=""150"" y=""70%"">

<tspan  fill=""red"" >
",[Day],"
</tspan>

<tspan  fill=""rgb(3,123,228)"" >
",LEFT((TEXT([Date])),LEN(TEXT([Date]))-5),"
</tspan>

</text>

</svg>")
5 Likes

That’s awesome, thanks!

2 Likes

So this image is all in one SVG.
Super cool @Ratatosk

3 Likes

Super cool indeed!! :smiley:

As someone with a graphic designer background, to just have a little bit of say on the UI/UX feels great!

5 Likes