https://forum.obsidian.md/t/custom-full-calendar-with-dataview/34133/4
CSV Input
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("Directory/Calendars/Equal-Parent-Time.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', 0)
calendar.setOption('scrollTime', 7)
calendar.setOption('displayEventEnd', false)
calendar.setOption('displayEventTime', false)
calendar.render();
Now and for an hour
this.container.style.minHeight = "500px";
const { renderCalendar } = app.plugins.plugins["obsidian-full-calendar"];
let calendar = renderCalendar(this.container, [[{start: new Date(), id: "id", title: "Now and for an hour"}]]);
calendar.render()Basic
// Get a reference to the Full Calendar plugin
const { renderCalendar } = app.plugins.plugins["obsidian-full-calendar"];
// Set the minimum height of the container
this.container.style.minHeight = "300px";
// Render the calendar with the plugin's events
let calendar = renderCalendar(this.container, []); calendar.render();4-day Work-Week
// Get a reference to the Full Calendar plugin
const { renderCalendar } = app.plugins.plugins["obsidian-full-calendar"];
// Set the minimum height of the container
this.container.style.minHeight = "300px";
// Configure the calendar options
const calendarOptions = {
initialView: 'timeGridWeek',
weekends: false,
businessHours: {
daysOfWeek: [1, 2, 3, 4], // Monday - Thursday
startTime: '09:00',
endTime: '17:00',
},
height: 'auto',
eventSources: [],
};
// Render the calendar with the configured options
let calendar = renderCalendar(this.container, calendarOptions);
calendar.render();all-day Week
// Get a reference to the Full Calendar plugin
this.container.style.minHeight = "130px";
const { renderCalendar } = app.plugins.plugins["obsidian-full-calendar"];
// Render the calendar with the plugin's events
let calendar = renderCalendar(this.container, [[{start: new Date(), allDay: true, id: "id", title: "Now and for an hour"}]]);
calendar.render();3-day Prior Event
// Get a reference to the Full Calendar plugin
this.container.style.minHeight = "130px";
const { renderCalendar } = app.plugins.plugins["obsidian-full-calendar"];
// Render the calendar with the plugin's events
let calendar = renderCalendar(this.container, [[{
start: new Date(new Date().getTime() + (3 * 24 * 60 * 60 * 1000)),
allDay: true, id: "id1", title: "Day 1 Event"
},{
start: new Date(new Date().getTime() + (2 * 24 * 60 * 60 * 1000)),
allDay: true, id: "id2", title: "Day 2 Event"
},{
start: new Date(new Date().getTime() + (1 * 24 * 60 * 60 * 1000)),
allDay: true, id: "id3", title: "Day 3 Event"
}]]);
calendar.render();Fixed Events 1
// Get a reference to the Full Calendar plugin
this.container.style.minHeight = "300px";
const { renderCalendar } = app.plugins.plugins["obsidian-full-calendar"];
// Define the event data
let events = [
{
backgroundColor: '#452538',
borderColor: '#406f0b',
allDay: true,
start: new Date(new Date().getTime() - (3 * 24 * 60 * 60 * 1000)), // 3 days prior to current date
end: new Date(new Date().getTime() - (24 * 60 * 60 * 1000)), // 1 day prior to current date
id: "Event Details",
title: "📄 3-Day All-Day Event"
},
{
backgroundColor: '#4d95f7',
borderColor: '#4d95f7',
allDay: false,
start: new Date(),
end: new Date(new Date().getTime() + (60 * 60 * 1000)), // 1 hour from now
id: "event2.md",
title: "1-Hour Event"
}
];
// Render the calendar with the event data
let isMobile = window.innerWidth < 500;
let calendar = renderCalendar(this.container, [events], {
weekNumbers: true,
initialView: 'dayGridMonth',
nowIndicator: true,
scrollTimeReset: false,
dayMaxEvents: true,
headerToolbar: {
left: "prev,next today",
center: "title",
right: "dayGridMonth,timeGridWeek,timeGridDay,listWeek",
},
footerToolbar: {
right: "today,prev,next",
left: "timeGrid3Days,timeGridDay,listWeek",
}
});
calendar.setOption('weekNumbers', true)
calendar.setOption('firstDay', 0)
calendar.setOption('scrollTime', 7)
calendar.setOption('displayEventEnd', false)
calendar.setOption('displayEventTime', false)
calendar.render();
Fixed Events 2
// Get a reference to the Full Calendar plugin
this.container.style.minHeight = "300px";
const { renderCalendar } = app.plugins.plugins["obsidian-full-calendar"];
// Define the event data
let events = [
{
backgroundColor: '#452538',
borderColor: '#406f0b',
allDay: true,
start: new Date(new Date().getTime() - (3 * 24 * 60 * 60 * 1000)), // 3 days prior to current date
end: new Date(new Date().getTime() - (24 * 60 * 60 * 1000)), // 1 day prior to current date
id: "Event Details",
title: "📄 3-Day All-Day Event"
},
{
backgroundColor: '#4d95f7',
borderColor: '#4d95f7',
allDay: false,
start: new Date(),
end: new Date(new Date().getTime() + (60 * 60 * 1000)), // 1 hour from now
id: "event2.md",
title: "1-Hour Event"
}
];
// Render the calendar with the event data
let isMobile = window.innerWidth < 500;
let calendar = renderCalendar(this.container, [events], {
weekNumbers: true,
initialView: 'dayGridMonth',
nowIndicator: true,
scrollTimeReset: false,
dayMaxEvents: true,
headerToolbar: {
left: "prev,next today",
center: "title",
right: "dayGridMonth,timeGridWeek,timeGridDay,listWeek",
},
footerToolbar: {
right: "today,prev,next",
left: "timeGrid3Days,timeGridDay,listWeek",
}
});
calendar.setOption('weekNumbers', true)
calendar.setOption('firstDay', 0)
calendar.setOption('scrollTime', 7)
calendar.setOption('displayEventEnd', false)
calendar.setOption('displayEventTime', false)
calendar.render();