Plugin: Event calendar

This plugin was inspired by the Life Calendar plugin, but with a few key differences;

  • generation is based on the events, so no need to set a start and end date
  • events do not have to be entered in the correct order
  • you can choose the scaling - group events by day, week or month
  • some UI differences

I built this because I wanted to visualise some events, but with a focus on readability and simplicity of content, which is why the YAML is much simpler in structure.

This is a first release. I am looking for ideas on how to further develop this, so feedback is appreciated.

8 Likes

Hi, I was using life calendar plugin as David Seah ´s Compact calendar and habit calendar . This is the reason that i´m interesting in a day option like you offer with your plugin.
I have some questions/request about your plugin:

  • As somebody say you in Github there is a problem with dark mode ( Tools -> Options -> Appearance -> Theme-> Dark) I change color background-color: #001731; and i see fine ( any other dark color will be fine, but for white theme the problem is the same.). Can you make posible we can choose the color of the note by css as can be done in life calendar plugin? This will be very usefull to see country bank holidays events in one color, meetings in other, etc... in the same day.
  • Can be today automatically mark with a special color ( or a circle arround number) ?
  • Is it posible to create a option to mark saturday and sunday with other colors if you choose day option? Can change the color of the month to different the end / begin of the month?
  • It will be posible to add repeats event in one line ( year events like birthdays or quarterly like blood donation etc...).
  • Can add the format dd-mm-yyyy to the date of the event? I see that accept the time and order the events by the time in the day ( great !!).

These are suggestions of course I know that you have your planning so be free. Thanks in advance.

Thanks for the feedback!

  1. Dark Mode - Unfortunately that person never explained how to reproduce the problem, so I couldn't fix it. I didn't even know Joplin had a dark mode. I'll look into it.

  2. Choose colour of note - This feature is already there

  3. Mark today - This feature is already there

  4. Mark Saturday / Sunday - It should be possible, I don't think it should be a lot of work. I may add this.

  5. Repeat events - I'm not likely to add this

  6. dd-mm-yyyy - Not sure I understand what you're asking here. Do you mean, on the hover card?

When I have some free time, I'll see what I can do. I suggest you read the documentation to see how to work with the other features.

Certainly the UI could do with improving, if you have any CSS skills I'll greatly appreciate any effort.

Hi, thanks for your answer.
I see today mark as yellow ( sorry for my mistake). Thanks to consider mark saturday / sunday.
When i talk about day/month/year format I am asking if is posible to add and use this format when i introduce the note ( anyway is not a problem use year month day to introduce the data ).
Choose color of note: I try to use ClassName as in life calendar and don´t work. As you say in github bgcolor is for event container, i see that when go to the day the color of all notes at the day are the same even if bgcolor are diferent. Is there a way to change the color of one note when is showing the events for this specific day ( see one note in red other in blue or whatever we write in bgcolor or classname and distinguish them by colors). ( I´ve reinstall the plugin to see that the color changed that i did don´t affect other things and all full notes are showing with the same color )

I´ve only see the readme in github. If there is any other documentation please tell me. Unfortunatly i haven´t CSS knowledge.

Thanks again.

Thanks to consider mark saturday / sunday - what I'm lacking are UI skills. If you can provide me with a design, how this should look, depending on how feasible it is, I will implement it (on day view). Actually I think the day view could do with a lot of improvement.

day/month/year format - yes! But this is not as easy as it looks, I will explain. You see, this plugin is aimed at the global community - and each locale has different ways of formatting dates, (for example, americans like mm/dd/yyyy and europeans dd/mm/yyyy). As far as I can tell, it is not easy or reliable to check which locale you are in. There are tricks like with geolocation, or the navigator.language property, but most people have it set to whatever the default is set to, and they don't change it. Without knowing this I can't tell whether the date supplied is mm-dd-yyyy or dd-mm-yyyy. Right now it works with how JS currently works by default, which is to interpret it as yyyy-mm-dd or mm-dd-yyyy. Believe me, I would like to change this, as I prefer the european formatting. Maybe in the future I find a solution.

I try to use ClassName as in life calendar and don´t work - You can't use features from another plugin and expect it to work; this plugin is not the same as the life calendar plugin. They do not share any code.

Is there a way to change the color of one note when is showing the events for this specific day - do you mean the full note view? I hate the colour / design myself

Hi , I know that image can accept everything and the code is most importantant but these are only ideas:
image
image

I see that other plugins have configuration options. I don´t know if there is posible you can create a configuration where the colors can be choose by the user ( inside options). I think these will be great and can be cover all themes that user could use. I´m thinking about the up band. The options perhaps can be :

  • Today color
  • Weekend color
  • Special day color ( could be posible to choose some days that have specific color, this can be usefull to define bank holidays of every country).
  • Color of moth name ( same as theme, by default or choose one)

About the event-calendar .group .hover-card:
Can every note have a color choose by the user when add the date (by example the color use in bgcolor)?
Can include icon ?
Can text be in justify mode better than center ( Not title, only the text if exist?

The next one are brainstorm (so i´m sure that include idiot thinks):
I´m not sure if is posible to have a small icon in this band in a float option ( that can be use for habits , checkit or cross) and or for moon state or other use by the user. ( margin-left: .25rem; float: right; ) (Sorry is is an idiot thing, remember that i don´t have css knowledge ).
Show icon behind the date or in the band for moon calendar ¿?¿
Show icons if there are more notes these days ( I´m not sure about this, perhaps the most silly think)

image

Can add in the future text can include links (external an to other notes)?

Of course i don´t have colour knowledge as you can see so i´m sure somebody in the forum can tell you best suggestions.

Thanks in advance for your time even if not consider any idea.

I type all the weekends and a moon calendar ( times are for Madrid ) for 2023. I´ve include last day of year 2022 to have a calendar begining on monday.

```joplin-plugin-event-calendar
group: day
events:
# INICIO Y FINAL
- date: 2022-12-26
  icon: 26
  title: 2022
  bgColor: Gray
- date: 2022-12-27
  icon: 27
  title: 2022
  bgColor: Gray
- date: 2022-12-28
  icon: 28
  title: 2022
  bgColor: Gray
- date: 2022-12-29
  icon: 29
  title: 2022
  bgColor: Gray
- date: 2022-12-30
  icon: 30
  title: 2022
  bgColor: Gray
- date: 2022-12-31
  icon: 31
  title: Nochevieja 2022
  bgColor: Gray
# HABITOS ✓ ✗
# NO diarios
# TRABAJO
# SABADOS y DOMINGOS
- date : 2023-1-1
  icon : ene
  title: Domingo
  bgColor: LightSlateGray
- date : 2023-1-7
  icon : 7
  title: Sábado
  bgColor: LightSlateGray
- date : 2023-1-8
  icon : 8
  title: Domingo
  bgColor: LightSlateGray
- date : 2023-1-14
  icon : 14
  title: Sábado
  bgColor: LightSlateGray
- date : 2023-1-15
  icon : 15
  title: Domingo
  bgColor: LightSlateGray
- date : 2023-1-21
  icon : 21
  title: Sábado
  bgColor: LightSlateGray
- date : 2023-1-22
  icon : 22
  title: Domingo
  bgColor: LightSlateGray
- date : 2023-1-28
  icon : 28
  title: Sábado
  bgColor: LightSlateGray
- date : 2023-1-29
  icon : 29
  title: Domingo
  bgColor: LightSlateGray
- date : 2023-2-4
  icon : 4
  title: Sábado
  bgColor: LightSlateGray
- date : 2023-2-5
  icon : 5
  title: Domingo
  bgColor: LightSlateGray 
- date : 2023-2-11
  icon : 11
  title: Sábado
  bgColor: LightSlateGray
- date : 2023-2-12
  icon : 12
  title: Domingo
  bgColor: LightSlateGray
- date : 2023-2-18
  icon : 18
  title: Sábado
  bgColor: LightSlateGray
- date : 2023-2-19
  icon : 19
  title: Domingo
  bgColor: LightSlateGray
- date : 2023-2-25
  icon : 25
  title: Sábado
  bgColor: LightSlateGray
- date : 2023-2-26
  icon : 26
  title: Domingo
  bgColor: LightSlateGray 
- date : 2023-3-4
  icon : 4
  title: Sábado
  bgColor: LightSlateGray
- date : 2023-3-5
  icon : 5
  title: Domingo
  bgColor: LightSlateGray
- date : 2023-3-11
  icon : 11
  title: Sábado
  bgColor: LightSlateGray
- date : 2023-3-12
  icon : 12
  title: Domingo
  bgColor: LightSlateGray
- date : 2023-3-18
  icon : 18
  title: Sábado
  bgColor: LightSlateGray
- date : 2023-3-19
  icon : 19
  title: Domingo
  bgColor: LightSlateGray
- date : 2023-3-25
  icon : 25
  title: Sábado
  bgColor: LightSlateGray
- date : 2023-3-26
  icon : 26
  title: Domingo
  bgColor: LightSlateGray
- date : 2023-4-1
  icon : abr
  title: Sábado
  bgColor: LightSlateGray
- date : 2023-4-2
  icon : 2
  title: Domingo
  bgColor: LightSlateGray 
- date : 2023-4-8
  icon : 8
  title: Sábado
  bgColor: LightSlateGray
- date : 2023-4-9
  icon : 9
  title: Domingo
  bgColor: LightSlateGray
- date : 2023-4-15
  icon : 15
  title: Sábado
  bgColor: LightSlateGray
- date : 2023-4-16
  icon : 16
  title: Domingo
  bgColor: LightSlateGray 
- date : 2023-4-22
  icon : 22
  title: Sábado
  bgColor: LightSlateGray
- date : 2023-4-23
  icon : 23
  title: Domingo
  bgColor: LightSlateGray
- date : 2023-4-29
  icon : 29
  title: Sábado
  bgColor: LightSlateGray
- date : 2023-4-30
  icon : 30
  title: Domingo
  bgColor: LightSlateGray 
- date : 2023-5-6
  icon : 6
  title: Sábado
  bgColor: LightSlateGray
- date : 2023-5-7
  icon : 7
  title: Domingo
  bgColor: LightSlateGray 
- date : 2023-5-13
  icon : 13
  title: Sábado
  bgColor: LightSlateGray
- date : 2023-5-14
  icon : 14
  title: Domingo
  bgColor: LightSlateGray
- date : 2023-5-20
  icon : 20
  title: Sábado
  bgColor: LightSlateGray
- date : 2023-5-21
  icon : 21
  title: Domingo
  bgColor: LightSlateGray 
- date : 2023-5-27
  icon : 27
  title: Sábado
  bgColor: LightSlateGray
- date : 2023-5-28
  icon : 28
  title: Domingo
  bgColor: LightSlateGray
- date : 2023-6-3
  icon : 3
  title: Sábado
  bgColor: LightSlateGray
- date : 2023-6-4
  icon : 4
  title: Domingo
  bgColor: LightSlateGray
- date : 2023-6-10
  icon : 10
  title: Sábado
  bgColor: LightSlateGray
- date : 2023-6-11
  icon : 11
  title: Domingo
  bgColor: LightSlateGray
- date : 2023-6-17
  icon : 17
  title: Sábado
  bgColor: LightSlateGray
- date : 2023-6-18
  icon : 18
  title: Domingo
  bgColor: LightSlateGray
- date : 2023-6-24
  icon : 24
  title: Sábado
  bgColor: LightSlateGray
- date : 2023-6-25
  icon : 25
  title: Domingo
  bgColor: LightSlateGray
- date : 2023-7-1
  icon : jul
  title: Sábado
  bgColor: LightSlateGray
- date : 2023-7-2
  icon : 2
  title: Domingo
  bgColor: LightSlateGray
- date : 2023-7-8
  icon : 8
  title: Sábado
  bgColor: LightSlateGray
- date : 2023-7-9
  icon : 9
  title: Domingo
  bgColor: LightSlateGray
- date : 2023-7-15
  icon : 15
  title: Sábado
  bgColor: LightSlateGray
- date : 2023-7-16
  icon : 16
  title: Domingo
  bgColor: LightSlateGray
- date : 2023-7-22
  icon : 22
  title: Sábado
  bgColor: LightSlateGray
- date : 2023-7-23
  icon : 23
  title: Domingo
  bgColor: LightSlateGray
- date : 2023-7-29
  icon : 29
  title: Sábado
  bgColor: LightSlateGray
- date : 2023-7-30
  icon : 30
  title: Domingo
  bgColor: LightSlateGray
- date : 2023-8-5
  icon : 5
  title: Sábado
  bgColor: LightSlateGray
- date : 2023-8-6
  icon : 6
  title: Domingo
  bgColor: LightSlateGray
- date : 2023-8-12
  icon : 12
  title: Sábado
  bgColor: LightSlateGray
- date : 2023-8-13
  icon : 13
  title: Domingo
  bgColor: LightSlateGray
- date : 2023-8-19
  icon : 19
  title: Sábado
  bgColor: LightSlateGray
- date : 2023-8-20
  icon : 20
  title: Domingo
  bgColor: LightSlateGray
- date : 2023-8-26
  icon : 26
  title: Sábado
  bgColor: LightSlateGray
- date : 2023-8-27
  icon : 27
  title: Domingo
  bgColor: LightSlateGray
- date : 2023-9-2
  icon : 2
  title: Sábado
  bgColor: LightSlateGray
- date : 2023-9-3
  icon : 3
  title: Domingo
  bgColor: LightSlateGray
- date : 2023-9-9
  icon : 9
  title: Sábado
  bgColor: LightSlateGray
- date : 2023-9-10
  icon : 10
  title: Domingo
  bgColor: LightSlateGray
- date : 2023-9-16
  icon : 16
  title: Sábado
  bgColor: LightSlateGray
- date : 2023-9-17
  icon : 17
  title: Domingo
  bgColor: LightSlateGray
- date : 2023-9-23
  icon : 23
  title: Sábado
  bgColor: LightSlateGray
- date : 2023-9-24
  icon : 24
  title: Domingo
  bgColor: LightSlateGray
- date : 2023-9-30
  icon : 30
  title: Sábado
  bgColor: LightSlateGray
- date : 2023-10-1
  icon : oct
  title: Domingo
  bgColor: LightSlateGray
- date : 2023-10-7
  icon : 7
  title: Sábado
  bgColor: LightSlateGray
- date : 2023-10-8
  icon : 8
  title: Domingo
  bgColor: LightSlateGray
- date : 2023-10-14
  icon : 14
  title: Sábado
  bgColor: LightSlateGray
- date : 2023-10-15
  icon : 15
  title: Domingo
  bgColor: LightSlateGray
- date : 2023-10-21
  icon : 21
  title: Sábado
  bgColor: LightSlateGray
- date : 2023-10-22
  icon : 22
  title: Domingo
  bgColor: LightSlateGray
- date : 2023-10-28
  icon : 28
  title: Sábado
  bgColor: LightSlateGray
- date : 2023-10-29
  icon : 29
  title: Domingo
  bgColor: LightSlateGray
- date : 2023-11-4
  icon : 4
  title: Sábado
  bgColor: LightSlateGray
- date : 2023-11-5
  icon : 5
  title: Domingo
  bgColor: LightSlateGray
- date : 2023-11-11
  icon : 11
  title: Sábado
  bgColor: LightSlateGray
- date : 2023-11-12
  icon : 12
  title: Domingo
  bgColor: LightSlateGray
- date : 2023-11-18
  icon : 18
  title: Sábado
  bgColor: LightSlateGray
- date : 2023-11-19
  icon : 19
  title: Domingo
  bgColor: LightSlateGray
- date : 2023-11-25
  icon : 25
  title: Sábado
  bgColor: LightSlateGray
- date : 2023-11-26
  icon : 26
  title: Domingo
  bgColor: LightSlateGray
- date : 2023-12-2
  icon : 2
  title: Sábado
  bgColor: LightSlateGray
- date : 2023-12-3
  icon : 3
  title: Domingo
  bgColor: LightSlateGray
- date : 2023-12-9
  icon : 9
  title: Sábado
  bgColor: LightSlateGray
- date : 2023-12-10
  icon : 10
  title: Domingo
  bgColor: LightSlateGray
- date : 2023-12-16
  icon : 16
  title: Sábado
  bgColor: LightSlateGray
- date : 2023-12-17
  icon : 17
  title: Domingo
  bgColor: LightSlateGray
- date : 2023-12-23
  icon : 23
  title: Sábado
  bgColor: LightSlateGray
- date : 2023-12-24
  icon : 24
  title: Domingo
  bgColor: LightSlateGray
- date : 2023-12-30
  icon : 30
  title: Sábado
  bgColor: LightSlateGray
- date : 2023-12-31
  icon : 31
  title: Domingo
  bgColor: LightSlateGray
# CALENDARIO LUNAR
- date : 2023-01-07 00:08
  icon : 🌕
  title: luna llena
  bgColor: midnightblue
- date : 2023-01-15 03:10
  icon : 🌗
  title: cuarto menguante
  bgColor: midnightblue
- date : 2023-01-21 21:53
  icon : ⚫
  title: luna nueva SUPERLUNA
  bgColor: midnightblue
- date : 2023-01-28 16:19
  icon : 🌓
  title: cuarto creciente
  bgColor: midnightblue
- date : 2023-02-05 19:28
  icon : 🌕
  title: luna llena
  bgColor: midnightblue
- date : 2023-02-13 17:01
  icon : 🌗
  title: cuarto menguante
  bgColor: midnightblue
- date : 2023-02-20 08:06
  icon : ⚫
  title: luna nueva SUPERLUNA
  bgColor: midnightblue
- date : 2023-02-27 09:05
  icon : 🌓
  title: cuarto creciente
  bgColor: midnightblue
- date : 2023-03-07 13:40
  icon : 🌕
  title: luna llena
  bgColor: midnightblue
- date : 2023-03-15 03:08
  icon : 🌗
  title: cuarto menguante
  bgColor: midnightblue
- date : 2023-03-21 18:23
  icon : 🌑
  title: luna nueva
  bgColor: midnightblue
- date : 2023-03-29 04:32
  icon : 🌓
  title: cuarto creciente
  bgColor: midnightblue
- date : 2023-04-06 06:34
  icon : 🌕
  title: luna llena
  bgColor: midnightblue
- date : 2023-04-13 11:11
  icon : 🌗
  title: cuarto menguante
  bgColor: midnightblue
- date : 2023-04-20 06:12
  icon : 🌑
  title: luna nueva
  bgColor: midnightblue
- date : 2023-04-27 23:20
  icon : 🌓
  title: cuarto creciente
  bgColor: midnightblue
- date : 2023-05-05	19:34
  icon : 🌕
  title: luna llena
  bgColor: midnightblue
- date : 2023-05-12	16:28
  icon : 🌗
  title: cuarto menguante
  bgColor: midnightblue
- date : 2023-05-19	17:53
  icon : 🌑
  title: luna nueva
  bgColor: midnightblue
- date : 2023-05-27	17:22
  icon : 🌓
  title: cuarto creciente
  bgColor: midnightblue
- date : 2023-06-04	05:42
  icon : 🌕
  title: luna llena
  bgColor: midnightblue
- date : 2023-06-10	21:31
  icon : 🌗
  title: cuarto menguante
  bgColor: midnightblue
- date : 2023-06-18	06:37
  icon : 🌑
  title: luna nueva
  bgColor: midnightblue
- date : 2023-06-26	09:50
  icon : 🌓
  title: cuarto creciente
  bgColor: midnightblue
- date : 2023-07-03	13:39
  icon : 🌕
  title: luna llena
  bgColor: midnightblue
- date : 2023-07-10	03:48
  icon : 🌗
  title: cuarto menguante
  bgColor: midnightblue
- date : 2023-07-17	20:32
  icon : 🌑
  title: luna nueva
  bgColor: midnightblue
- date : 2023-07-26	00:07
  icon : 🌓
  title: cuarto creciente
  bgColor: midnightblue
- date : 2023-08-01	20:32
  icon : 🌕
  title: luna llena SUPERLUNA
  bgColor: midnightblue
- date : 2023-08-08	12:28
  icon : 🌗
  title: cuarto menguante
  bgColor: midnightblue
- date : 2023-08-16	11:38
  icon : 🌑
  title: luna nueva
  bgColor: midnightblue
- date : 2023-08-24	11:57
  icon : 🌓
  title: cuarto creciente
  bgColor: midnightblue
- date : 2023-08-31	03:35
  icon : 🌕
  title: luna llena
  bgColor: midnightblue
- date : 2023-09-07	00:21
  icon : 🌗
  title: cuarto menguante
  bgColor: midnightblue
- date : 2023-09-15	03:40
  icon : 🌑
  title: luna nueva
  bgColor: midnightblue
- date : 2023-09-22	21:32
  icon : 🌓
  title: cuarto creciente
  bgColor: midnightblue
- date : 2023-09-29	11:57
  icon : 🌕
  title: luna llena
  bgColor: midnightblue
- date : 2023-10-06	15:48
  icon : 🌗
  title: cuarto menguante
  bgColor: midnightblue
- date : 2023-10-14	19:55
  icon : 🌑
  title: luna nueva
  bgColor: midnightblue
- date : 2023-10-22	05:29
  icon : 🌓
  title: cuarto creciente
  bgColor: midnightblue
- date : 2023-10-28	22:24
  icon : 🌕
  title: luna llena
  bgColor: midnightblue
- date : 2023-11-05	09:37
  icon : 🌗
  title: cuarto menguante
  bgColor: midnightblue
- date : 2023-11-13	10:27
  icon : 🌑
  title: luna nueva
  bgColor: midnightblue
- date : 2023-11-20	11:50
  icon : 🌓
  title: cuarto creciente
  bgColor: midnightblue
- date : 2023-11-27	10:16
  icon : 🌕
  title: luna llena
  bgColor: midnightblue
- date : 2023-12-05 06:49
  icon : 🌗
  title: cuarto menguante
  bgColor: midnightblue
- date : 2023-12-13 00:32
  icon : 🌑
  title: luna nueva
  bgColor: midnightblue
- date : 2023-12-19 19:39
  icon : 🌓
  title: cuarto creciente
  bgColor: midnightblue
- date : 2023-12-27 01:33
  icon : 🌕
  title: luna llena
  bgColor: midnightblue
#ECLIPSES
- date : 2023-5-5 21:17
  icon : 🌙
  title: Eclipse lunar penumbral
  text: Salida de la Luna 21:17 Puesta de la Luna 06:54
  bgColor: midnightblue
- date : 2023-10-14 07:59
  icon : 🌙
  title: Eclipse parcial de Luna
  text: Salida de la Luna 07:59 Puesta de la Luna 19:33
  bgColor: midnightblue
- date : 2023-10-28 19:05
  icon : 🌙
  title: Eclipse parcial de Luna
  text: Salida de la Luna 19:05 Puesta de la Luna 08:03
  bgColor: midnightblue

I've updated the plugin to fix the issue with dark mode.

I'm sorry, but due to events in my personal life, I will not have the time to make these other changes.

Thanks for your change. Looks fine in dark mode, anyway i see that i can add the style in the note without change the cache of the plugin and modified css. As i prefer days dark too i had add in the note.


Can you tell me why the day is showing in english and not in the language configurate as month can see? "agosto de 2023" in spanish and "Tuesday 8th" in english.

Fixed!