Fun Share: Calendars in Thunkable

Free Templates, Designs, and Block Combinations
1

Here’s a calendar that’s made using the Luxon javascript library, the web viewer, and a DVL. There’s several ways to bring a calendar into your app now!

check it out!

you may need to view this on a mobile device for propper formatting!

project page

*** updated link ^^^^ ***

2

It would be cool to see one of your pop-up windows appear when clicking on a date.

3

Thanks! That’s the next step!

I need to experiment with other methods of speeding this up though!

4

https://x.thunkable.com/projectPage/62daaeccee0a1d0011503b23

A date picker I’ve been cooking up using the flatpickr.js library and the webviewer. This is only a start! (Works best on mobile not web app)

5

It’s much easier to use the Google materialize date picker. I use it with the web Viewer component.

6

Care to share an example here?! Sounds great!

7

This is the URL for the Date Picker in Materialize

This is the html file to use

<!DOCTYPE html>
<html>
<head>
    <!-- Compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
    <!-- Compiled and minified JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

    <!--Let browser know website is optimized for mobile-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
    <label for="user_date">Click to view calendar</label>
    <input type="text" class="datepicker" id="user_date">
    <script>
      document.addEventListener('DOMContentLoaded', function () {
         var elems = document.querySelectorAll('.datepicker');
         var instances = M.Datepicker.init(elems);
      });
    </script>
</body>
</html>

Example Screen
image

8

Really nice!