Fun Share: Create a Calendar using Luxon and Layouts

[jared]

Hey all! Check this out! Feel free to copy blocks and even use the HTML page provided in the web viewers, they are hosted on one of my private server and free for use though you should create your own version eventually.

https://x.thunkable.com/projectPage/6358829b13bd2c31d1f0fbc6

updated project link

The blocks are pretty simple and it’s quick!!! no delays like you may experience using the DVL to do this same task.

[tatiang]

When I preview this in a browser, the days are off. I assume this is supposed to be August but today is Friday, August 12, not Friday, August 11.

And then when I Live Test in Thunkable Live on an iPhone 11, the screen is blank except for the Back and Forward buttons.

[jared]

Can you try remixing and adding your own timezone? I’d imagine the issue lies there regarding the odd date stuff you see. Lemme look into the white screen!

[tatiang]

Sure, sorry where do I do that?

@Jared_Gibb Edit: is that part of the html script?

[jared]

Check it again. I finally fixed it!

[manyone]

today (tuesday, 10/25/2022) is showing up as monday! (maybe you should display the year - maybe it’s from last year?!)

it’s looking good though (i would make all the buttons smaller and the same size and shape with space around, though)

[jared]

Did you check your timezone? Check the blocks

Check out this updated project!
https://x.thunkable.com/projectPage/6358829b13bd2c31d1f0fbc6

[jared]

@tatiang

Edit: is that part of the html script?

I had only noticed last night there was nowhere in the blocks to enter timezone or start of week

[manyone]

i hate to be a stickler but can you add the year - and the week containing the rest of october? and the dates are still on the wrong day of the week! . (ie. oct 26 should be a wednesday). thanks for fixing the buttons,

[jared]

Thunkable - 26 October 2022

it’s right for me. did you change your timezone, not sure if that would make a difference @manyone

[tatiang]

It looks like it’s set for EDT (USA). But… regardless of the time zone, October has 31 days, right?

[jared]

@tatiang its set for America/Detroit or EDT, yup! also, it’s set to show only 5 weeks worth of dates. someone wouuld have to play with this to change that.

[manyone]

there’s something weird about the time zone logic. when i change it to America/Los_Angeles, October 26 falls on Wednesday but i set it America/Detroit, Oct 26 falls on Thursday! when it is in this “invalid mode”, the last day of the month does not show, see nov 2022 below:

this is what november 2022 should look like:

but once you reset to america/los_angeles, then everything goes back to normal

[jared]

Time zones are weird like that. Here’s what Nov looks like to me with America/Detroit as the timezone and me living near Detroit.

The calendar only looks right when setting the timezone appropriately. Do you live in the Los Angeles timezone @manyone ?

[manyone]

yes

[jared]

That speed though

Way faster than using a dvl and it’s super customizable.

[manyone]

it’s really fast!
can you share what the html looks like?

[jared]

You can find it here!
https://jared-gibb-project-123.web.app/thunk/dateCreator.html

    document.addEventListener('DOMContentLoaded', function() {
        console.log('hello s')
        ThunkableWebviewerExtension.postMessage('hello');
}, false);

    ThunkableWebviewerExtension.receiveMessageWithReturnValue(function (message, callback) {
        a = JSON.parse(message);
        var c = null != a.time_zone ? (c = luxon.DateTime.now().plus({ months: a.offset }).setZone(a.time_zone)) : luxon.DateTime.now().plus({ months: a.offset }),
            d = c.startOf("month");
        b = d;
        a = "Sunday" == a.start_on ? 0 : 1;
        7 > d.weekday && (b = d.minus({ days: d.weekday - a }));
        a = c.endOf("month");
        for (c = []; b <= a;) c.push(b.toMillis()), (b = b.plus({ days: 1 }));
        

        
        callback(JSON.stringify({dates: c}))

    });