Doing Google Calendar style dragging-todo-to-agenda in TiddlyWiki

Plugins
,
#1

I’ve been using this for a while, but just add the doc for it now.

Read EventCalendarSideBar tiddler on doc site to learn how to build your own draggable todo list.

Switch language of doc site use this button on top right

图片
图片488×552 31.7 KB

And open Event Calendar alternative page layout using this button.

图片
图片2488×1159 218 KB

Toggle sidebar using top right button on Event Calendar layout, and try drag a todo to the agenda.

图片
图片1645×1330 163 KB

This is how I use Google Calendar to arrange my Todos when I was a student. And now this experience is fully open-sourced and hackable on TiddlyWiki platfrom.

2 Likes
#2

This is interesting @linonetwo where you are using the great features of Google Calendar for daily calendar.

  • I would love to take googles features further in a tiddlywiki implementation but I think its too difficult.
#3

Google’s product is prone to shutdown, like rss reader and google+. So it is better to reimplement good things into TW and use it offline.

2 Likes
#4

Always a pleasure seeing your work, @linonetwo, I look forward to playing around with this – I’d like to ultimately have most events on my calendar backed up in my tiddlywiki and vice-versa

1 Like
#5

Hey @linonetwo, this is incredibly cool, I am definitely going to incorporate this into my workflow :slight_smile:

A small pile of questions and notes:

Is there any native way to push calendar events to one’s google calendar? I already have a system working for doing it with my current setup, but if you’ve already got something native to this plugin that works well I’ll switch to yours.

Also, have you implemented any sort of recurring event feature? I have toyed around with that in the past, but never have gotten very far – would love to see your approach.

I notice that if I open the sidebar and then close (in the calendar view), there remains a gap on the calendar

image
image767×468 8.09 KB

Have replicated on an empty as well.

I have implemented an independent css for this sidebar, because it wasn’t playing nicely with how I’ve got mine configured:

.event-calendar-sidebar {
    width: 25vw !important;
    max-width: 25vw !important;
    min-width: 200px;
    right: 0;
    position: relative;
    display: none;
    height: calc(100vh - 50px); /* Adjust the 50px based on your header height */
    overflow-y: auto; /* Enable vertical scrolling */
    overflow-x: hidden; /* Hide horizontal scrollbar */
}


.tc-sidebar-scrollable:not(.tc-sidebar-hidden) .event-calendar-sidebar {
    display: block;
}


.tc-sidebar-scrollable.tc-sidebar-hidden .event-calendar-sidebar {
    overflow: hidden !important;
}


.event-calendar-sidebar::-webkit-scrollbar {
    width: 6px;
}

.event-calendar-sidebar::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.event-calendar-sidebar::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 3px;
}

The resulting sidebar scrolls independently of the calendar, in case you have long todo lists.



What is the relationship between the dragged item and the calendar supposed to be? I am finding that when I make a draggable list of items I can move them into the calendar, but the resulting calendar blocks don’t reflect anything about the tiddler the dragged item links to – am I doing something wrong?