SAMPLE APP: Crazy Calendar Hack

[GreenFlux]

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-3ab...

Here’s a quick overview of how it works:

drive.google.com

Crazy Calendar v2.mov (video)

Google Drive file.

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

---

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

[Chris_Jeal]

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?

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.

[GreenFlux]

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.

[Chris_Jeal]

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.

[Ratatosk]

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:

[Grant_Stead]

Can you post the Appsheet based SVG expression?

[Ratatosk]

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>")

[Grant_Stead]

That’s awesome, thanks!

[Fabian_Weller]

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

[Ratatosk]

Super cool indeed!!

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

[Mike_Moss]

@Ratatosk @GreenFlux This calendar view is really interesting. Nice information design at work here.

Since we’re always looking to evolve our apps, I wanted to ask:

What’s the inspiration / context that motivated you to come up w/ this type of view? Do you have a domain specific problem, and how is this helping users in your app?

Any details are helpful, as we’re interested on how specific configurations help app users with their tasks.

[peterson]

The best thing here imho is that we have a clickacle calendar. that would be amazing if we could just click on a day in our calendar and it ran an action, opened a form, something like that.

[Fabian_Weller]

You mean a Row Selected Even Action like we have in table, galley, deck and card view. Yes that would be cool.

[SkrOYC]

You know… came from the first one, now I have to do this instead

PS: I think I’m gonna make both
Thanks again! @GreenFlux