Welcome to Timeless, an infinitely scrolling calendar designed to help you visualize time continuously as you plan your life.
Here it is in action: Timeless: The Infinitely Scrolling Calendar 📅✨
- An infinitely scrolling web calendar app that allows adding notes to any day. New weeks are dynamically added when scrolling, so the calendar expands infinitely in both directions.
- Data is stored client-side using localStorage, so notes are private.
- To add a note, you click on a day and start typing. Hitting enter saves the note. To delete a note, you delete its text.
- It shows the current date highlighted, and automatically scrolls to today’s date on load. You can click the calendar button to smoothly scroll to today’s date anytime.
- The calendar shows the full month names and year in the blank space at the end of each month for easier navigation when scrolling far into the past or future.
- Export the calendar data to a JSON file in your Downloads folder; or import data from your saved JSON file to load previously saved notes.
- You can choose to sync your data between multiple devices by saving calendar data to a shared drive, such as iCloud, Dropbox, or Google Drive.
- The sync button allows syncing the calendar data in a cloud storage directory of your choosing. It compares timestamps to determine whether to load newer data from the file or save newer local data to the file.
This project is an appreciative fork of Continuous Calendar by Evan Wallace with some added functionality of my own.
Traditional digital calendars like MacOS Calendar and Google Calendar segment time into discrete months: You conceptualize the future one month at a time.
You’re shown a single month’s worth of dates. Then, to navigate through time, you click the ＞ or Next button… at which point the current month is replaced by a view of the next month.
Having different months displayed as discrete units in this way doesn’t make sense for my brain. It presents time as discontinuous and divided, making it difficult to conceptualize in an intuitive way when events are happening relative to each other.
With traditional calendars, I find it difficult to plan ahead as I think about the future as I figure out, say, travel dates for an upcoming trip.
Even calendars that offer the ability to display several months at once still separate dates from one month to the next:
Your brain has to do a little mental calculation to grasp that the 31st of one month down at the bottom over here is just one day before the 1st of the next month up there on the right.
It’s not like your brain can’t figure it out… but it requires a level of abstraction, intellectualizing the concept of time.
It’s like a map that’s not to scale. Sure, you can mentally compensate… but wouldn’t you rather just be able to see at a glance where things are, knowing you can trust your intuitive sense of how far away things are from each other?
What I want is a calendar that accurately depicts the continuous flow of time, displaying the future as what it is: a continuous series of days.
Instead of having to click “Next,” like turning the page of a book, I want to be able to just scroll down to see upcoming events.
Why are calendars designed in this counterintuitive way? Tradition. In the old days, we hung paper calendars on the wall. Wall space, since it’s physical space, is limited. Your wall isn’t high enough – and you’re not tall enough – to display 12 months worth of days.
But we’re not in the 12th century anymore (the name of this app notwithstanding). Google Calendar is not a paper calendar. Just as your iPad lets you read a book in “Continuous Scroll” mode rather than requiring you to manually turn the page every few paragraphs, you can just press the down arrow to read on.
That’s the experience I want for a calendar and I bet I’m not the only one.
To try to solve this problem, I researched and bought various apps that sounded promising, including Timepage by Moleskine and Agenda. Though interesting approaches, they didn’t offer the visually intuitive monthly interface I was looking for.
Then I stumbled upon Continuous Calendar by Evan Wallace. It was perfect. Exactly what I was looking for: a calendar where I could scroll down and up as I thought about the future and planned my weeks and months. One that displayed time in a visual, intuitive way.
- Infinite scrolling through months and years, both forward in time (i.e. downward on the scrolling calendar) and backward in time (i.e. upward).
- Click on a day to add calendar events.
- Calendar data stored not on the cloud but within your browser’s local storage.
I’ve taken Evan’s original implementation and added a few enhancements of my own:
- Added the ability to display days of the week
- Added the ability to display name of month
- Add the ability to save a backup of your stored calendar events as a JSON file; and add the ability to load stored events from said backup file.
- Added an accompanying Python script to take the saved data and convert it into an ICS file that I can import into my MacOS calendar. (This doesn’t yet work reliably.)
- European-style calendar: In my mind, the week begins on Monday. Why? Because, for the reasons discussed above, it doesn’t make sense to separate Saturday and Sunday into separate weeks. I think of the weekend as a single unit. When I ask myself what I’m going to do this weekend, I’m thinking about Saturday and Sunday, not Saturday of this week and Sunday of next.
I’m not a coder. ChatGPT Plus made these changes for me. Here’s a record of my conversation with ChatGPT: https://chat.openai.com/share/512d0b31-f773-49a6-8246-2e003f186e6a
- In order to facilitate exporting calendar data to a calendar app like MacOS calendar, I want to modify the format of saved data to explicitly store the full date of each calendar event.
To get started with Timeless:
Visit this page: Timeless: The Infinitely Scrolling Calendar 📅✨
That’s it! You can now begin adding events!
Clone the repository and open the HTML file.
git clone https://github.com/incandescentman/timeless.git
cd timeless
open index.htmlClick on any day to add a calendar event. A text area will appear where you can enter text. Press RETURN to save the note to local storage, which will automatically adjust the day’s cell to accommodate the text.
Use your mouse wheel or trackpad to scroll through months and years effortlessly. The calendar dynamically loads additional weeks as you scroll, ensuring a smooth and continuous user experience.
To edit a note, simply click on the existing note text, make changes, and press RETURN to save.
To delete a note, clear the text in the text area and click elsewhere or press RETURN.
Timeless is designed to be easily customizable. You can modify the CSS styles in css/style.css to match your aesthetic preferences or adapt the functionality in js/calendar.js to meet specific needs.
Contributions to Timeless are welcome! I need all the help I can get. Please fork the repository, make your changes, and submit a pull request. We appreciate your input and look forward to seeing your creative ideas and improvements.
Timeless is released under the MIT License. See the LICENSE file in the repository for full details.