SAMPLE APP: Crazy Calendar Hack

GreenFlux · 12-22-2020 01:08 PM

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:

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