【分享】日历面板

前言

Obsidian 那个日历插件看着挺简洁挺舒服的,所以想给自己也整一个,初步的效果还行。既然弄好了,那就顺便分享出来,希望能帮到有同样需求的人。

目前思源的插件系统还在计划之中,所以这次用的是挂件 + 主题 theme.js 注入的方式来实现类似的效果。

视频演示

实现

  • 日历面板用的是一个叫 vue-calendar-component 的组件,这个组件看着比较简洁;
  • 通过 theme.js 将日历图标、日历挂件注入到指定位置,点击日历图标后弹出日历面板,点击面板外的区域来关闭日历。
  • 日历挂件内,通过 SQL 遍历查询当月所有日期,检查是否有对应的日记文档(文档标题为:2022-10-12 格式,注意月份、日 都要有两位有效数字),给有对应日记文档的日期加上标记。切换月份后,执行同样的查询。
  • 挂件内有个临时的对象,缓存以日期为键名,文档链接为键值的键值对,方便点击日历面板后能跳转到对应的日记文档。
  • 右上角那个 多少日(比如:12日)的区域,点击后是刷新。一般是刚打开历史面板后发现没有更新当月的日记记录时点一下,或者切换到其他月份后想快速切回本月时点一下。

压缩包

1、初次提交

日历面板.zip

2、小修改

  • 日期标记改为数字下的小圆点
  • 处理日期中,日数字小于 10 时无法跳转的问题

日历面板 2.zip

截图:

新日历面板.png

3、小修改

  • 修理蓝框线被遮挡的问题

日历面板 3.zip

截图:

日历 3.png

日历 3 周日开始.zip

截图:

周日开始.png

4、修复蓝框线不连贯的问题

之前日历面板的蓝框线,是多段下框线拼接成的,衔接处渲染的不连贯,有类似于小点的效果。看着有点不舒服,改成一条连贯的下框线。

日历 4.zip

日历篮筐线.png

5、点击日期自动创建日记(使用指定模板)

日历 5.zip

  • 右上角——【星期几】的位置,点击后,弹出已打开的笔记本,选中一个作为放置新创建日记的笔记本,会缓存到 LocalStorage 的 calendar_current_notebook 字段;
  • 日记模板会使用笔记本-设置里设置的模板;
  • 日记的路径直接使用默认的 /daily note/2022/10/2022-10-01 格式
    日记路径.png

演示:

6、解决日记模板未正确渲染的问题

日历版本 6.zip

尝试之后,发现单纯用文档中的 API 似乎不好完整实现,决定借用笔记里插入模板的同款方法来处理日记模板的插入。

需要在 main.js 中加两句来挂载 insertHTML 方法。

备注:

1、挂载的方法用于插入指定的日记模板;

2、不挂载也能创建指定日期的空白文档,只是不能自动插入对应模板。

如何修改 main.js?

  • 笔记版本 V2.4.0V2.4.1V2.4.3
  • 系统:Windows 10

打开 笔记安装目录\resources\stage\build\app\main.js

搜索

t.WYSIWYG=class{constructor(e){this.lastHTMLs={}

替换成:

window._d=n(8469);t.WYSIWYG=class{constructor(e){window._t=e,this.lastHTMLs={}

效果演示

7、解决创建日期文档后未自动标注的问题

压缩包:

日历版本 7.zip

说明:

  • 之前的版本,点击日期创建对应文档后,需要手动刷新后才能看到新创建文档的日期被标注。改成创建完对应文档后,自动标注该日期。

实际效果:

如何使用?

  • 解压后,有一个【theme.js】,一个【日历】文件夹
  • 【日历】放到挂件所在那个文件夹,【theme.js】放到所用主题那里,或者复制到已有的 theme.js 中(总共也没几行)。
  • 清除缓存后刷新

相关帖子

优质回帖

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...
  • 1995hanjian
    订阅者

    赞呀

  • Achuan-2
    订阅者

    膜拜

  • TangQi

    牛,期待插件

    👍

  • TangQi 2 评论

    image.png

    貌似有点大 😂

    哈哈,好像是不太美观啊,可能改成底下有小红点的那种好看一点。
    BryceAndJuly
    第二个版本可能好看一点,变小圆点了
    BryceAndJuly
  • Achuan-2 2 评论
    订阅者

    如果想改成识别“2022.09.11,可以修改 app.js,把"-"替换成"."

    现在这个代码有一个问题,日小于 10 的都不能跳转,这里 clickDay 这个函数有点问题,需要加图中红框的一句

    image.png

    2 操作
    Achuan-2 在 2022-09-12 19:34:10 更新了该回帖
    Achuan-2 在 2022-09-12 19:33:51 更新了该回帖
    嗯,是的,我改一下
    BryceAndJuly
    已经更新
    BryceAndJuly
  • TangQi 2 评论

    image.png

    确实好看多了,但是我发现一个小 BUG 就是点击顶栏的 12 日的时候,界面会刷新同时日历中的 12 日会闪一个绿色框,一下就消失

    image.png

    然后可能是上个月有笔记的原因,我发现这个蓝色条也会变

    image.png

    上上个月没有笔记,就是全蓝色框,不过这个框还挺好看的

    是不是大大刚刚改的时候少改了一个刷新-<>-
    TangQi
    那个蓝线应该是被下方数字的圆背景色遮挡了,等我把上面的蓝线放到上层就好了。12 日那个就是今天啊,默认会标注今天的,然后有日记的话再换成小圆点。问题不大,改改就行
    BryceAndJuly
  • ciwoyipang 4 评论
    捐赠者 订阅者

    大佬。。功能太快了哈哈。日历图标也要为此让路了吗?才让路了数据历史

    image.png

    其实不用改原来的图标,你在那个 theme.js 里改日历的 svg 就可以了,喜欢换成啥就换成啥。思源这点就很好,外观随便改,哈哈
    BryceAndJuly
    @BryceAndJuly 我移植这套图标主要是想图标更达意,能一眼看出什么意思。数据历史起码最新的我感觉更合适一点,“已变更的历史”,日历的话后面再看下。
    ciwoyipang
    @BryceAndJuly 另外大佬有加思源群吗?一些主题大佬想问问那个图标能不能随主题变色啥的。有兴趣可以加一下 QQ 群 1017854502
    ciwoyipang
    @ciwoyipang 有加一个群吧,不过我卸载 QQ 很久了,偶尔才下回来看看。你们先研究研究,哈哈
    BryceAndJuly
  • szukkboy
    支持者 订阅者

    太牛了。

  • SyTlr 2 评论
    订阅者

    万人血书求上架集市!(1/10000)

    能用就行,上不上架其实没那么重要啦。而且它一个挂件带了个 theme.js,感觉怪怪的。
    BryceAndJuly
    @BryceAndJuly 主要是更新的时候不用再回来社区下载了呀 hhhh🤣
    SyTlr
  • lichzy
    订阅者

    牛了。

  • Nutschut
    支持者 订阅者

    挂件文件夹在哪 😂

    1 回复
  • BryceAndJuly 1
    订阅者 作者

    挂件文件夹.png

    1 回复
  • Nutschut
    支持者 订阅者

    谢谢 😄

  • TangQi

    防止有新人不会换:

    image.png

    这里面的 widgets 是挂件文件夹,""日历""直接放入此文件夹

    theme.js 指路

    image.png

    找到自己使用的主题

    image.png

    image.png

    右键

    image.png

    选择记事本打开,将压缩包中的 theme.js 中代码复制进去即可

  • yanzhenguo
    订阅者

    厉害,回顾笔记方便多了

  • qifengle1998

    不知道为什么,日历面板这么热门、经典的功能, 思源却一直不做。。。

    看来还是得等插件开放,自己做了

  • SuJun
    订阅者

    太棒啦!感谢

  • SuJun 1 评论
    订阅者

    请问有没有方法可以把周天放在第一列呢,我自己一周开始是星期天。看了一下好像有个 sundayStart 的 API,但是不知道怎么用。要是可以实现自己的周天开始就更棒啦

    嗯,确实可以,刚传的第三版本第二个压缩包就是周日开始的。
    BryceAndJuly 1 1 赞同
  • PiChou
    订阅者

    好好好

  • tmkddskf
    订阅者

    非常牛,狠有用

  • wonder1893
    订阅者

    请教,如果我的过往名称都是 20220929 这种的,应该如何修改代码,因为写了很多文档了都是用这种格式写的,逐个改太大工程量了

    1 回复
  • BryceAndJuly
    订阅者 作者

    这种应该在查询的时候改一下日期格式就好了,以第三个版本的第一个压缩包为例,解压缩后,先找到并打开 日历面板3\日历\js\app.a7eb515d.js

    然后搜索

    let e=await this.SiYuan_SQL_dailyNote(t)
    

    替换成

      let tempData= t.split('-').join('');let e=await this.SiYuan_SQL_dailyNote(tempData)
    

    首次使用前,建议先清除笔记的缓存并刷新。

    先试试,看行不行。

    1 回复
  • wonder1893 1 评论
    订阅者

    大佬,成了,谢谢帮忙!

    这个比挂件的日历好用多了,这个能通过创建当前后面的日期的文档的汇总,一定程度上实现了 todo 规划的功能 ;而集市的挂架只能汇总当前时间之前的文档;

    哈哈,能用就行,这个其实也是挂件,不过换了种呈现方式而已。集市上的挂件自有独到之处,根据自己的需求来就好。
    BryceAndJuly
  • taobuyan 2 评论
    订阅者

    请问大佬第三步【清除缓存后刷新】应该怎么操作?

    我把【theme.js】放到对应的主题文件夹里面,左上角没有出现日历的图标。

    在右下角 【开发者工具】——【Network】 面板,勾选【Disable cache】后按 F5 刷新一下,让它重新加载就行。刷新完后,取消勾选【Disable cache】并关闭【开发者工具】。 备注:图标是白色的
    BryceAndJuly
    已经成功,感谢大佬。有了这个定期回顾很方便
    taobuyan
  • lentikr 2 评论
    订阅者

    现在的逻辑似乎是在思源启动时检索一遍相关的文档名,可不可以加一个手动刷新的按钮,比如我创建了当天的日记后似乎需要重启才能在日历中看到。

    另外,能否支持点击无日记的日期自动创建当天的日记?

    2 回复
    【刷新】按钮其实有的,右上角那个多少日,点击就是刷新功能。暂时先手动创建吧,最近没啥时间搞这个。
    BryceAndJuly
    @BryceAndJuly 谢谢,不知道后面如果能自动创建的话,能否和在当天手动按 Alt+5 是一个效果?(文档路径、模板等)
    lentikr
  • BryceAndJuly
    订阅者 作者

    和按 Alt+5 一个效果的话应该可以吧,我刚刚翻了下思源的 API,实现思路还是很简单的。

    日历.png

    1 回复
  • mdzz2048
    订阅者

    也可以考虑用这个 API(对应的应该就是 Alt + 5)

    image.png

    1 回复
  • BryceAndJuly
    订阅者 作者

    这个之前看日记图标的回调的时候有留意过,但是看到参数里只是指定笔记本,似乎不好指定日期,猜测应该是默认使用当前日期来创建当天的日记。所以才绕一大圈用其他 API 来做。

    创建当天日记的 API.png

  • BryceAndJuly
    订阅者 作者

    可以试一下第五个版本。

    1 回复
  • lentikr
    订阅者

    大佬你好,我发现第五个版本中使用日历创建的日记似乎没有办法正确地解析我的模板,另外日记创建的目录也不太对,多了一个 daily note 层级。

    我创建日历使用的模板如下。

    日计划.zip

    image.png

    image.png

    日记文件夹配置:

    image.png

    1 回复
  • BryceAndJuly
    订阅者 作者

    1、日记路径的问题

    这个你大概没有看压缩包下方的文字说明。日记路径目前是固定的,并没有读取设置。

    不过要改成你现在用的这种也不难,打开 工作空间\data\widgets\日历\js\app.796dd5e3.js

    搜索

    /daily note/
    

    替换成

    /
    

    2、模板渲染问题

    嗯,渲染确实有问题。我本地用的都是些简单模板,所以之前直接获取内容然后通过 Markdown 来创建文档也是可以用的。像你发的这个模板里有获取当前时间的,可能少了个 渲染模板 的步骤,我回头看看文档研究一下。

    1 回复
    1 操作
    BryceAndJuly 在 2022-10-20 13:42:23 更新了该回帖
  • lentikr
    订阅者

    明白了,谢谢大佬啦 ❤️

    1 回复
  • BryceAndJuly 1
    订阅者 作者

    第六个版本应该可以正常渲染了。

  • HowcanoeWang
    订阅者

    日历挂件 Calendar.app.js 兼容任何自定义今日速记路径 by HowcanoeWang · Pull Request #56 · royc01/notion-theme (github.com)

    这个 js 代码是楼主加了密吗,全部都是单字母变量,改得要死要活的(o_ _)ノ

    核心改动请参考这个 commit:support dailynote path template · HowcanoeWang/notion-theme@52228e1 (github.com)

    PS:目前这一套,好像创建新日记的时候,模板字符串没有成功替换,已修复:fix new daily note creation error · HowcanoeWang/notion-theme@ec4c9a1 (github.com)

    PPS:球球楼主开个 github 项目吧,论坛里面用 zip 文件发版不是个事啊 <@_@>

    1 回复
    3 操作
    HowcanoeWang 在 2022-10-27 22:12:59 更新了该回帖
    HowcanoeWang 在 2022-10-27 22:02:18 更新了该回帖
    HowcanoeWang 在 2022-10-27 22:01:20 更新了该回帖
  • BryceAndJuly
    订阅者 作者

    没有啊,应该是打包过程对变量名做了处理,所以代码的可读性变差了。

    1 回复
  • HowcanoeWang 1 评论
    订阅者

    开个项目,我来给你提这个 pr( ̄︶ ̄)↗ 

    当时分享是图省事,直接发社区了。确实该找时间弄一下这个。
    BryceAndJuly
  • HowcanoeWang 1
    订阅者

    看 2 个多月没更新了,应该稳定了不会再发版了

    于是,在 D 大的指点下,使用原生 API 完成了模板的插入,供参考

    https://github.com/HowcanoeWang/notion-theme/blob/133c4d27ed74767512b54d16dc945e75dcd61b01/calendar/js/app.4e3d2b88.js#L221-L250

    并且继续支持自动读取日记路径模板,不用用户手动修改源码中的路径。

    3 回复
    1 操作
    HowcanoeWang 在 2023-01-19 23:36:16 更新了该回帖
  • BryceAndJuly
    订阅者 作者

    👍,没注意到 dataType 的值可以设置成 dom,之前的做法确实不规范 😂 。

    1 回复
  • Achuan-2 1
    订阅者

    很强,但发现一个问题。(e = eval(''+this.dayCurrent+'')),这里有问题,this.dayCurrent 会是 undifine

    image.png(e = eval(''+this.dayCurrent+'')),

    1 回复
  • svchord
    捐赠者 订阅者

    大佬太强了,打包后的 js 代码都能改……

    1 回复
  • HowcanoeWang
    订阅者

    看的头都秃了 😭

  • HowcanoeWang
    订阅者

    真的不考虑把源码放在 github 上吗,这样也方便我们其他人改,也方便更新和交流 😂

    1 回复
  • HowcanoeWang 5 评论
    订阅者

    抽空看一下,这段代码感觉像是原作者写的,我这边没有动应该 😳

    不单单只是修改了这一处,其他地方也有改动,这个变量在最上面定义了,原代码里面没有,建议整体复制

    2 操作
    HowcanoeWang 在 2023-01-20 17:34:17 更新了该回帖
    HowcanoeWang 在 2023-01-20 17:30:28 更新了该回帖
    是嘛,可我就是直接从 Github clone 复制的嘞。clickDay(t) 这里 this.dayCurrent 是正常的,但到了 changeDate(t)就成了 undefine
    Achuan-2
    @Achuan-2 右上角有没有提示“[日历插件][Error] 读取用户配置失败,请点击日历面板-> 星期,选择对应的笔记本后再试”?
    HowcanoeWang
    @HowcanoeWang 没有,是正常读取的,我用你改的 notion theme 反而不会跳出弹窗,直接就是默认的 daily note 路径了 ,而不是笔记本设置的路径了
    Achuan-2
    @Achuan-2 我唯一能复现这个 undifned 的错误就是,刚开始启动的时候,用户没有指定根目录,然后报[日历插件][Error] 读取用户配置失败的错误,没关系,这本身就是一个严重 bug,我修修看到时候再麻烦你测试一下
    HowcanoeWang
    @Achuan-2 用这个版本试试看?https://github.com/HowcanoeWang/calendar/releases,重点就是修改 index.html 引用新的 app.230121.js
    HowcanoeWang
  • BryceAndJuly
    订阅者 作者

    不是不想放啊,就是这个文件夹本来是放在桌面上的,后来整理过几次桌面,把原文件搞丢了。第七版就是打包后的 js 文件里直接改的。我看原来的文件夹搞丢了,现在它也能跑,就懒得动它了。

  • HowcanoeWang
    订阅者

    开源项目地址:Release 230121 · HowcanoeWang/notion-theme (github.com) (branch: calendar-v7-fix)

    此次修改了 index.html,并将 app.4e3d2b88.js 迁移至 app.230121.js

    1. 参考 js.map 中遗留的信息(app.4e3d2b88.source.js),恢复压缩后的部分变量名,增加代码可读性
    2. 优化代码业务逻辑
    3. 如果缓存中没有默认日记本,则默认选择第一个打开的日记本
    4. 修复首次打开日历界面,无法加载日记点
    5. 支持笔记本自定义模板路径
    6. 使用思源 API,创建新日记时,使用笔记本模板
    7. 支持切换日记本时,自动加载对应的日记本配置选项

    TM 一个本地的 js 应用,直接使用 js 源代码不会损失多少性能的,压缩了之后根本没法维护

    1 回复
    1 操作
    HowcanoeWang 在 2023-01-22 18:39:31 更新了该回帖
  • Achuan-2
    订阅者

    暂时没发现其他问题,很强!👍

请输入回帖内容 ...