Templater code for Day Planner with start and end time, conditional call links, indented description and some formatting for readability

[FeralFlora]

Code

<%*
var events = await app.plugins.getPlugin('ics').getEvents(moment(tp.file.title,'YYYY-MM-DD'));
events.sort((a,b) => a.utime - b.utime).forEach((e) => {
    const calendar = e.icsName.replace(" ","-");
    const callUrl = e.callUrl? ` [${e.callType}](${e.callUrl})` : '';
    const location = e.location? ` 📍 *(${e.location})*` : '';
    tR+=`- [ ] ${e.time}-${e.endTime} **${e.summary}**${location}${callUrl} #${calendar}\n`
    if (e.description) {
        const inlineDescription = e.description.replace(/(?:\r\n|\r|\n)/g," ").replace(/\s{2,}/g," ");
        tR+=`    - ${inlineDescription}\n`
    }
})
%>

Screenshots

[muness]

Thanks @FeralFlora ! I'll add a link to this in the README.

[FeralFlora]

Great, thanks! And thanks for this great plugin 👍

[muness]

You're welcome!

[kfitz]

This is really neat. One question: is it possible to affect the format of {e.time} such that it presents as H:mma rather than HH:mm?

[muness]

The getEvents function that exposes events to DataView, Templater and the plugin's native markdown generator formats the time using the plugin level time format time: moment(e.start).format(this.data.format.timeFormat).

So... you can configure the time format you'd like in the ICS Plugin settings.

[kfitz]

Ugh, of course! I thought I had set that the way I wanted but apparently not. Thanks!

[Rhydderch]

Thank you for sharing this!

I'm getting a weird error code:

Could it be due to the way I named the calendars in the settings?

I tried removing the emojies, or renaming the calendars, but it did not fix the issues

[FeralFlora]

I haven't encountered these errors, so I don't think they are related to the Templater code. But you can test that assumption by using the ICS: Import events command instead. If you also get an error there, then it's not related to this code.

[Rhydderch]

The previous templater code I was using was working fine, so I was able to find that the problem was coming from tp.file.title .
Your script was not working for me because I use a non-standard date, e.g. 2023-10-27_Fri

So I replaced tp.file.title with moment(tp.file.title,'YYYY-MM-DD') and now everything works perfectly!
I think that this slight tweak might help other people with non standard daily note dates.

Thanks again for writing this wonderful templater script FeralFlora!

[FeralFlora]

I see, glad you figured it out. The standard example just uses tp.file.title, though, so I assume you changed it before? But since your adaptation is more robust, I agree that it's a useful change that perhaps ought to be included in the standard example (@muness).

[FeralFlora]

@Rhydderch I added your adaptation to my example so other people won't run into this issue.

[planefun2]

I'm using the built-in Templates feature and the regular dataview query and trying to put in this date format which is what my daily notes uses -

(today comes out as Monday, December 11, 2023)

I'm getting the same error, having replaced the getEvents("{{date:YYYY-MM-DD}}"); to read getEvents("{{date:dddd, MMMM DD, Y}}");

Is there a way to get that to work?

[RomanMunar]

What does the mdArray variable do?

[muness]

Looks like just old code that got carried over and is no longer necessary.

[muness]

Thanks for the tip, removed it from the README Templater example.

[FeralFlora]

Removed it from my example too, I assumed it was used behind the scenes somehow since it was in the readme example.

[muness]

It was a redundant copy / paste from the Dataview example.

[pcause]

I made a variation of the templater example. puts the description in a callout. Andin MS365 an empty description has content. "\n" or is "", so added a check otherwise after each tasks I get a line with just an indented bullet.

<%*
var events = await app.plugins.getPlugin('ics').getEvents(moment(tp.file.title,'YYYY-MM-DD'));
events.sort((a,b) => a.utime - b.utime).forEach((e) => {
const calendar = e.icsName.replace(" ","-");
const callUrl = e.callUrl?  [${e.callType}](${e.callUrl}) : '';
const location = e.location?  📍 *(${e.location})* : '';
tR+=- [ ] ${e.time} ${e.endTime} **${e.summary}** ${location}${callUrl} \n
if (e.description && e.description != "" && e.description != "\n") {
const inlineDescription = e.description.replace(/(?:\r\n|\r|\n)/g," ").replace(/\s{2,}/g," ");
tR+=> [!INFO]-\n>    - ${inlineDescription}\n
}
})
%>

Also, since the API doesn't return the dataview format for the times, I'll be adding a version tomorrow that does that.

[salvadoralicea]

I have been using ics for few weeks. It is great!
Im using the dataview query version even though i use templeter.
Is there a way to show the events for the week instead of the day events?
I am not an expert codding but I think with help we are able to change the above code to show the events of the current week using moment and tp.file.title.
May someone help me?

[pcause]

you can update a script to add an outer loop that loops through dates starting with tp.file.title and tp.file.title plus 6. you'll need to use moment.js to convert file title to a date you can iterate with.

[salvadoralicea]

@muness , I was thinking in a dataview query looking for the events of the week using the tp.file.title (my weekly Review Note).
Results:

---

2023-12-10
Event #1 with its period of time, description, and location.
Event #2 ...
Event n of this day
....
2023-12-11
Event #1 with its period of tie, description, and location.
Event #2
Event n of this day
....
until the day of the end of the week.

[muness]

@salvadoralicea , courtesy of ChatGPT, based on the example from @pcause :

<%*
// Function to get dates for the entire week
function getWeekDates(baseDate) {
    let dates = [];
    for (let i = 0; i < 7; i++) {
        dates.push(moment(baseDate).startOf('week').add(i, 'days'));
    }
    return dates;
}

// ICS plugin instance
const icsPlugin = app.plugins.getPlugin('ics');

// Get all dates of the current week
const weekDates = getWeekDates(tp.file.title);

// Fetch events for each day and group them
let weekEventsByDay = {};
for (const date of weekDates) {
    const formattedDate = date.format('YYYY-MM-DD');
    let dayEvents = await icsPlugin.getEvents(formattedDate);
    if (dayEvents.length > 0) {
        weekEventsByDay[formattedDate] = dayEvents;
    }
}

// Generate the output
for (const [date, events] of Object.entries(weekEventsByDay)) {
    // Add day header
    tR += `## ${moment(date).format('dddd, MMMM Do YYYY')}\n`;

    // Sort and list events for the day
    events.sort((a, b) => a.utime - b.utime).forEach(e => {
        const callUrl = e.callUrl ? ` [${e.callType}](${e.callUrl})` : '';
        const location = e.location ? ` 📍 (${e.location})` : '';
        tR += `- [ ] ${e.time} ${e.endTime} ${e.summary} ${location}${callUrl} \n`;
        if (e.description && e.description.trim() !== "") {
            const inlineDescription = e.description.replace(/(?:\r\n|\r|\n)/g, " ").replace(/\s{2,}/g, " ");
            tR += `> [!INFO]-\n> - ${inlineDescription}\n`;
        }
    });
    tR += "\n"; // Add a newline for spacing
}
%>

[salvadoralicea]

I tried it however it gave me an error
When I applied the template to the week Note , the code started and try to read, however this warning showed up.
I tried different week notes, different calendar, same results.

[muness]

I don't think that's related to the template but rather something the plugin is having trouble parsing in your calendar. The fact that you see that multiple times makes me think it's an event in your calendar multiple times this week.

Can you check the console for errors? (Ctrl Shift i on Windows)

[salvadoralicea]

The core code (the one above , advance for dailty events) works fine with my calendar. It is just this one for week that is giving the error. Below a copy/paste of the lines in console related to this:

X @ moment.min.js:2
plugin:ics:22 Error filtering events for calendar Salvador Calendar: Error: Invalid date passed in to RRule.between
getEvents @ plugin:ics:22
plugin:ics:22 Error parsing events for calendar Salvador Calendar: TypeError: Cannot read properties of undefined (reading 'forEach')
getEvents @ plugin:ics:22
plugin:ics:22 Error filtering events for calendar Salvador Calendar: Error: Invalid date passed in to RRule.between
getEvents @ plugin:ics:22
plugin:ics:22 Error parsing events for calendar Salvador Calendar: TypeError: Cannot read properties of undefined (reading 'forEach')
getEvents @ plugin:ics:22
plugin:ics:22 Error filtering events for calendar Salvador Calendar: Error: Invalid date passed in to RRule.between
getEvents @ plugin:ics:22
plugin:ics:22 Error parsing events for calendar Salvador Calendar: TypeError: Cannot read properties of undefined (reading 'forEach')
getEvents @ plugin:ics:22
plugin:ics:22 Error filtering events for calendar Salvador Calendar: Error: Invalid date passed in to RRule.between
getEvents @ plugin:ics:22
plugin:ics:22 Error parsing events for calendar Salvador Calendar: TypeError: Cannot read properties of undefined (reading 'forEach')
getEvents @ plugin:ics:22
plugin:ics:22 Error filtering events for calendar Salvador Calendar: Error: Invalid date passed in to RRule.between
getEvents @ plugin:ics:22
plugin:ics:22 Error parsing events for calendar Salvador Calendar: TypeError: Cannot read properties of undefined (reading 'forEach')

this is repetaed several times.

[muness]

We've seen this before, it's not the template code but something unexpected in some calendars.

Can you create a new bug and add whatever details you can. If you are willing to create a new calendar that has the big and share the ics file, that would help a lot as I haven't been able to reproduce the issue.

[pcause]

a small change to my example above. I added the schedule date to the items. tat way if one isn't complete it will show up with the date it was originally on in a later tasks query

<%*
var events = await app.plugins.getPlugin('ics').getEvents(moment(tp.file.title,'YYYY-MM-DD'));
events.sort((a,b) => a.utime - b.utime).forEach((e) => {
const calendar = e.icsName.replace(" ","-");
const callUrl = e.callUrl? ${e.callType} : '';
const location = e.location? 📍 (${e.location}) : '';
tR+=- [ ] ${e.time} ${e.endTime} ${e.summary} ${location}${callUrl} ⏳ ${tp.file.title} \n
if (e.description && e.description != "" && e.description != "\n") {
const inlineDescription = e.description.replace(/(?:\r\n|\r|\n)/g," ").replace(/\s{2,}/g," ");
tR+=> [!INFO]-\n> - ${inlineDescription}\n
}
})
%>

[salvadoralicea]

I tried it however I received the following error ;

Templater Error: Template parsing error, aborting.
Template syntax error: Unexpected token '{'

[salvadoralicea]

ok, I did some corrections to the code to forces it to work for me. Almost all of the change were single or double quotes. Thanks @pcause .

<%*
var events = await app.plugins.getPlugin('ics').getEvents(moment(tp.file.title,'YYYY-MM-DD'));
events.sort((a,b) => a.utime - b.utime).forEach((e) => {
    const calendar = e.icsName.replace(" ","-");
    const callUrl = e.callUrl? ` [${e.callType}](${e.callUrl})` : '';
    const location = e.location? ` 📍 *(${e.location})*` : '';
    tR+=`- [ ] ${e.time}-${e.endTime} **${e.summary}**${location}${callUrl} #${calendar}\n`
    if (e.description && e.description != "" && e.description != "\n") {
        const inlineDescription = e.description.replace(/(?:\r\n|\r|\n)/g," ").replace(/\s{2,}/g," ");
        tR+= `> [!INFO]-\n> ${inlineDescription}\n`
    }
})
%>

[avigilante]

@FeralFlora - Awesome! I'm using this code in my daily note template.
I'm a total noob on javascript, and was wondering if any of you can help: if I wanted to include the name of the attendees (from https://github.com/cloud-atlas-ai/obsidian-ics/blob/master/src/IEvent.ts ) what should I add to the code? Thanks in advance!

[muness]

For what it's worth, it seems like I don't get any attendees from the ics-plugin at all... that parameter is always empty

Have you downloaded the ICS to check to see if the attendees are specified? I've seen them mostly to be the email address for Google and O365 ics files.

[FeralFlora]

@ized3d This is not really possible as is, because attendee.name and attendee.email are often both the person's email. I've made an issue about it here. Nevertheless, I did implement another solution where the attendee emails are listed as mailto: links. I didn't run into the same issue of attendees always being empty.

I also simplified the whitespace regex for the description a lot, made "description" and "attendees" into dataview fields and did some other refactoring. Here's the new code:

<%_* 
const events = await app.plugins.getPlugin('ics').getEvents(moment(tp.file.title,"YYYY-MM-DD"));
events.sort((a, b) => a.utime - b.utime).forEach((event) => {
    const { time, endTime, summary, icsName, callUrl, callType, location, attendees, description } = event;
    const calendar = icsName.replace(" ", "-");
    const formattedCallUrl = callUrl ? ` [${callType}](${callUrl})` : '';
    const formattedLocation = location ? ` 📍 (${location})` : '';
    const attendeeList = attendees ? attendees.map(attendee => `[${attendee.name}](mailto:${attendee.email})`).join(", ") : '';
    tR += `- [ ] ${time}-${endTime} **${summary}**${formattedLocation}${formattedCallUrl} #${calendar} 📅 ${tp.file.title}\n`
    if (description) {
        const inlineDescription = description.replace(/\s+/g, " ");
        tR += `    - Description:: ${inlineDescription}\n`
    }
    if (attendeeList) {
        tR += `    - Attendees:: ${attendeeList}\n`
    }
})
%>

Having these fields as dataview fields ("description::" and "attendees::") allows you to do stuff like this (basic example):

```dataview
table description, attendees
from #my-calendar
```

Where #my-calendar is the tag version of your calendar name.

[FeralFlora]

Here's a much nicer Dataview table:

```dataview
TABLE without ID file.link as Date, L.text as Details, description as Description, attendees as Attendees
FROM "02 - Journal/Daily"
FLATTEN file.lists AS L
WHERE contains(L.tags, "#My-calendar")
```

[avigilante]

Hi @FeralFlora ! Thanks and sorry for the delay. I've used and modified your new template: thanks, that is PERFECT!
Personally, I format people by email address and companies by domain; it's a technique I copied from my CRM app:

1. By formatting people as email addresses, the right person is unequivocally linked* + if I look for a specific company domain I get all the people I know at that company + through aliases it's easy to associate a name and other email addresses to the same person.
2. By formatting companies by domain name, the link again is unequivocal; also, you can build a dataview query in the company note that lists all the people with that domain name.

So, yes...maybe not "nice to eye" to use domains / email addresses, but so much more functional for me.

• (believe it or not, I know two Tim Cook, and none of them is the Tim Cook you might be thinking of...and it's not the only instance of people with the same name. Funny story: there's someone with my exact same name - who somehow looks like me too! - who's a famous fashion designer)

[FeralFlora]

Hi @avigilante, no worries :) That's a good point about emails and domains as unequivocal identifiers. I was mostly thinking that it was impractical if you didn't yet have a person note on the person, and you only had the email, which can be rather cryptic at times.
But I'm glad everything fit well into your workflow! Enjoy!

[JohannSny]

Thank you very much! Would it be possible to format in a way that the "Full Calendar" plugin will understand?
Eg, time like this:
[startTime:: 09:30] [endTime:: 11:00]

Then it will automatically show up in full calendar too.

[pcause]

Thank you very much! Would it be possible to format in a way that the "Full Calendar" plugin will understand? Eg, time like this: [startTime:: 09:30] [endTime:: 11:00]

Then it will automatically show up in full calendar too.

you could change this part of the code in my exampel:

tR += `- [ ] ${time}-${endTime}

to

tR += `- [ ] [startTime:: ${time}] [endTime:: ${endTime}]

[HalisCz]

Is there any way how to get events only from particular calendar?

I want the Templater to fill in the first section on the page using my personal calendar, and the second section using work calendar?

[muness]

Hi! icsName has the name of the referenced calendar. e.g.

<%*
var events = await app.plugins.getPlugin('ics').getEvents(moment(tp.file.title,'YYYYMMDD'));

// Personal calendar section
tR += "## Personal\n";
events.filter(e => e.icsName === 'Personal')
  .sort((a,b) => a.utime - b.utime)
  .forEach((e) => {
    tR+=`- [ ] ${e.time} ${e.summary} ${e.location? e.location : ''}\n`
  })

// Work calendar section
tR += "\n## Work\n";
events.filter(e => e.icsName === 'Work')
  .sort((a,b) => a.utime - b.utime)
  .forEach((e) => {
    tR+=`- [ ] ${e.time} ${e.summary} ${e.location? e.location : ''}\n`
  })
%>