Comments (5)
Great idea!
I wasn't sure if this would work for minute length tasks within a day but it does and I've now got some PoC code generating this:
Day Planner
- 16:08 Setup
- 17:00 BREAK
Current Task
- 18:30 Reading
||18:30||->->->->->->->->->->->->->->->->->->||19:00||
- 19:00 BREAK
- 19:30 Writing blog post
- 20:30 BREAK
- 21:20 Prep for tomorrow
- 21:50 END
gantt
title Day Planner for 6 November 2020
dateFormat HH-mm
axisFormat %H:%M
section Tasks
Setup :16-08, 52mm
Reading :18-30, 30mm
Writing blog post :19-30, 60mm
Prep for tomorrow :21-20, 30mm
END :21-50
section Breaks
BREAK :17-00, 90mm
BREAK :19-00, 30mm
BREAK :20-30, 50mm
from obsidian-day-planner.
Amazing! Add some CSS color to distinguish between breaks and task!
You can use my example to understand the CSS color classes:
graph LR
X(Extreme bright) -- Derange --> A
Bright --Increase --> A((Tejas))
Dark --Diminish --> A
C(Reduce excess) --> A
White --> C
Blue --> C
Green --> C
Gold --> Bright
%% Class Definitions
%% =================
class Bright cssClass1;
classDef cssClass1 fill:grey;
class Dark cssClass2;
classDef cssClass2 fill:#373737;
class Tejas cssClass3;
classDef cssClass3 fill:#97593A;
class White cssClass4;
classDef cssClass4 fill:grey;
class Green cssClass5;
classDef cssClass5 fill:green;
class Blue cssClass6;
classDef cssClass6 fill:#1D4AAC;
class Gold cssClass7;
classDef cssClass7 fill:#B6B151;
class X cssClass8;
classDef cssClass8 fill:tDBD6A9, border:red;
class C cssClass9;
classDef cssClass9 fill:transparent, stroke:transparent;;
And please put it on the top of the note, as it is overview!
from obsidian-day-planner.
Makes sense to have it at the top of the Day Planner section, will be in 0.2.2.
I've added more info to the gantt chart section of the docs to cover the CSS customisation and added a file with some example CSS overrides:
from obsidian-day-planner.
I was even thinking if the current task and next task should be shown in diagram:
gantt
title A Gantt Diagram
title Day Planner for 6 November 2020
dateFormat HH-mm
axisFormat %H:%M
section NOW
Setup :16-08, 52mm
Writing blog post :17-00, 60mm
And remove the current progress indicator
> ||14:00||->->->->->->->->->->_ _ _ _ _ _ _ _ ||15:00||
This will force you to focus more on current task and prepare mentally :D for the next one. And it is more beautiful and obvious then textual progress bar.
Probably you can add Mermaid CSS class into div class and change width of display....just thinking aloud.
from obsidian-day-planner.
Could you raise this in a separate issue? We can discuss there.
from obsidian-day-planner.
Related Issues (20)
- Planner Heading Text Ignored HOT 3
- Day planner freezes after moving the task in timeline view HOT 2
- [POSSIBLE BUG] Midnight time showing up as noon
- Advanced Editing with ctrl and shift not working. HOT 6
- My Day Planner doesn't react at all to keys "Shift" either "Crl" key. HOT 1
- Uncaught Error task.text.split is not a function and freezing day planner timeline when using remote ics calendars HOT 1
- Note and view durations are inconsistent
- [Feature Request] Create events only on right click HOT 1
- Cannot make the dataview filter work HOT 2
- Cannot enter any settings in the DataView filter area.
- Request: Add the ability to filter out timestamps that do not belong to a task HOT 2
- Use different tasks date format?
- Allow en-dash for time ranges. HOT 1
- Tasks from Community Tasks Plugin not showing in calendar HOT 1
- [Feature Request] Override option for timeblock text color
- [Feature request] Add the option to start the week from other day (sunday) HOT 1
- How can I enter the next day by scrolling the timeline instead of using the arrow next to the date?
- Changing the event from a task to a bullet point if it has subtasks moves the time to that subtask. HOT 1
- [Feature Request] Time tracking and time boxing enhancements HOT 3
- Event and Tasks outside Day Planner session added in Timeline HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from obsidian-day-planner.