Custom Full Calendar with DataView

Thought I would share this one. It allows the rendering of a calendar using a csv file. I have one file per week that updates when my calendar changes. This is then loaded by dataview, parsed and used as an event source for the full calendar plugin.

The :page_facing_up: emoji is added to events with notes. Hold down CTRL if you want to view/create the note is a separate pane. Hold down CTRL when moving mouse over events to preview the pages if they exist.

I have it set to ISO weeks where first day of week is a Monday.

CSV headers:
calendar,allDay,start,end,id,title

calendar: family or personal. I make family a different background.
allDay: true/false
start: yyyy-MM-ddTHH:mm:ss
end: yyyy-MM-ddTHH:mm:ss
id: path to notes to take notes on the event or for the event.
title: title of the event.

Example:

calendar,allDay,start,end,id,title
family,false,2022-03-16T09:30:00,2022-03-16T10:20:00,DataStores/Meetings/Fred - Haircut,Fred - Haircut

From Gist:


```dataviewjs
this.container.style.minHeight = "1000px";
const { renderCalendar } = app.plugins.plugins["obsidian-full-calendar"];
let today = moment().format("GGGG-[W]WW");
let rawData = await dv.io.csv("DataStores/csv/" + moment().format("GGGG-[W]WW") + ".csv");
let entries = rawData.map((p) => ({
    backgroundColor: p.calendar == 'family' ? '#452538' : '#4d95f7',
    borderColor: this.app.vault.getAbstractFileByPath(p.id + ".md") ? '#406f0b' : '#4d95f7',
    allDay: p.allDay,
    start: DateTime.fromISO(p.start).toJSDate(),
    end: DateTime.fromISO(p.end).toJSDate(),
    id: p.id + ".md",
    title: this.app.vault.getAbstractFileByPath(p.id + ".md") ? '📄' + p.title : p.title,
}));
// console.log(entries.array());
let isMobile = window.innerWidth < 500;
let calendar = renderCalendar(this.container, [entries.array()], {

    weekNumbers: true,
    initialView: 'dayGridMonth',
    eventClick: async (info) => {
        console.log(info.event.id)
        let fileExists = await this.app.vault.adapter.exists(info.event.id);
        if (fileExists) {
            let file = this.app.vault.getAbstractFileByPath(info.event.id);
            console.log(file)
            if (info.jsEvent.getModifierState("Control")
                || info.jsEvent.getModifierState("Meta")) {
                let leaf = this.app.workspace.createLeafBySplit(this.app.workspace.getMostRecentLeaf(), "vertical");
                await leaf.openFile(file);
                calendar.render();
           } else {
                let leaf = this.app.workspace.getMostRecentLeaf();
                await leaf.openFile(file);
           }
       }
   },
   eventMouseEnter: (info) => {
        console.log(info)
        const path = info.event.id;
        this.app.workspace.trigger("hover-link", {
            event: info.jsEvent,
            source: "custom-cal",
            hoverParent: info.jsEvent.target,
            targetEl: info.jsEvent.target,
            linktext: path,
            sourcePath: path
        });
    }

});
calendar.setOption('weekNumbers', true)
calendar.setOption('firstDay', 1)
calendar.setOption('scrollTime', 7)
calendar.setOption('displayEventEnd', false)
calendar.setOption('displayEventTime', false)


calendar.render();

```
5 Likes

Wow! This is really huge. Thank you for share!

Is this possible to just parse all data for calendar from in-line dataview fields?

Yes, that should work. You would just need to pull all the pages and fields to match what the CSV returns. Replace the query.

This looks most interesting.
I just discovered ‘Full Calendar’
I have been looking to integrate my .ics based calendars into Obsidian.
I came to Forum to see how I could modify FC to show a “Monday” as first day of Week.
But, now I see this interesting solution.
As a non-coder … Is there a guide which will instruct me HOW to create the .csv “feeder” file for this and then how to config Obsidian to READ this .csv?

And if you know how to make FC render Monday first … that would be most appreciated.

Thx for creating good stuff.

The line below from the first post pulls in the csv file. It uses the current date to determine the current week in the year. so this translates to DataStores/csv/2022-W13.csv. So a csv file with that name in that folder will get read and then parsed to make the calendar items.

let rawData = await dv.io.csv("DataStores/csv/" + moment().format("GGGG-[W]WW") + ".csv");

Creating the csv is up to you. you could have it in a excel file and save as csv. as long as it matches the headers I referred to in the first post you will be good.

To change the first day update calendar.setOption('firstDay', 1) with the number of the day you want the week to start on.