Calender View

[lifelemons]

Hello,

I was wondering if we could chat about how best to implement a calendar view.
Disclaimer: by day a c++ programmer dealing with numbers, new to typescript

To get some understanding of typescript and how the plug-in works, I started by creating a rudimentary calendar view. So that I would be better prepared to have a discussion about how to implement a more formal calendar view. I am happy to change anything; my first attempt may not be the best long term; I am aware of some drawbacks of it.

My idea was to use the table implementation to handle getting the list of files and whichever associated properties the user wanted.
I have not implemented the Query part and passing that onto the DataviewCalendarRenderer. For now I have a hard coded query where I use file.ctime as my main date property. The additional associated properties could be additional rows in a calendar event item.

Current implementation:

• a start and end date is required to create a date interval (currently hard coded, just shows the current month)
• for each date in the interval, the table query, essentially WHERE file.ctime == date, is run
• the calender view then renders each day and its table

Different date interval views

• month view (showing last month as it has more files)
  
• week view (showing current week)
  

Note: Screenshots are using the default light theme. The theme can dictate the file width, and thus it effects the widths of the columns.

This implementation is date-centric, where the main iteration loop is a date. I appreciate one could also do this with a file-centric approach, where one iterates through a list of sorted files, and checks the date property. A date-centric approach for a calendar seemed cleaner to me: as each day has an independent table, and the full flexibility of a query of a table; and it seemed easier to deal with dates with no files. Though this date-centric approach may not be the best when properly considering how to implement the Query part.

I think the query implementation is my next step, and an important part. That is somewhere where I would appreciate some help as I don't have enough understanding with how it works. In my current approach: I need to take the raw string; split parts of it up; insert the calendar day query part; and then run it. I am not sure this is possible with how Query works.

This is where I am currently at, lots of questions, things to add and clean up. I thought a discussion would be good at this stage to optimise development, time spent, and progress. Again happy to change anything, the work so far was just me playing around in a hopefully useful way.

[blacksmithgu]

First things first - this is very cool! I like the usage of a table to create the Calendar outline; the only hard part seems to be how to implement "events" that span across multiple days.

Using date ranges as the query source is very interesting - it could probably be implemented directly in the FROM block of a query (similar to folder and tag sources) as a way to quickly obtain all pages in a given date range. This would give the desired date-centric query approach (as opposed to a file-based approach).

For the query, happy to discuss this in gritty detail over discord or similar, but I would implement this by figuring out what you would want the query to be able to support; i.e., maybe something like

CALENDAR <field1> AS <name1>, ... FROM dates(2021, 2022)
WHERE ...

To do this implementation wise, you would need to add a parser for the CALENDER type (which could be a duplicate of the TABLE type), add a CalendarQuery query type, and then add an executeCalendar function in the query engine which would look similar to executeTable; you would then stuff all the render logic into a class in main.ts.

[jordanlewis]

Hi - I just noticed this discussion after trying to find a place to file the same feature request.

I have been working on a simple prototype that implements a CALENDAR query, which renders a calendar using https://github.com/liamcain/obsidian-calendar-ui. It follows the general plan you have laid out in your message.

But, the functionality I propose is slightly different than the OP's request. It's more akin (I think) to Notion's calendar view, which groups a selection of notes by a date given by an expression.

The prototype query syntax takes a single argument, the expression to use as the date for the note, like this:

CALENDAR <date field>
FROM ...
WHERE ...

The obsidian-calendar-ui plugin currently only allows showing dots on a given day, rather than links, but I'll plan to extend that UI with support for a list of links as well, and then update my prototype to use it.

I've created a prototype PR for this in #742

[blacksmithgu]

Looks great, happy to work with you to merge.

[NeodymiumPhish]

Hi!

Huge fan of the implementation as-is, but I'm curious whether there's any way/plan to set the calendar to show in a week format instead of month.

Just a curiosity, not a request!

Thanks!