【分享】日历面板

本贴最后更新于 664 天前,其中的信息可能已经时异事殊

前言

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 中(总共也没几行)。
  • 清除缓存后刷新
  • 思源笔记

    思源笔记是一款隐私优先的个人知识管理系统,支持完全离线使用,同时也支持端到端加密同步。

    融合块、大纲和双向链接,重构你的思维。

    22412 引用 • 89733 回帖

相关帖子

优质回帖
  • someone69799 1
    作者

    挂件文件夹.png

  • TangQi 1 赞同

    防止有新人不会换:

    image.png

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

    theme.js 指路

    image.png

    找到自己使用的主题

    image.png

    image.png

    右键

    image.png

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

  • someone69799 1
    作者

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

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...
  • Achuan-2 1

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

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

    1 回复
  • 其他回帖
  • TangQi 2 评论

    image.png

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

    image.png

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

    image.png

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

    是不是大大刚刚改的时候少改了一个刷新-<>-
    TangQi
    那个蓝线应该是被下方数字的圆背景色遮挡了,等我把上面的蓝线放到上层就好了。12 日那个就是今天啊,默认会标注今天的,然后有日记的话再换成小圆点。问题不大,改改就行
    someone69799
  • 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 更新了该回帖
  • 开源项目地址: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 源代码不会损失多少性能的,压缩了之后根本没法维护

    2 回复
    1 操作
    HowcanoeWang 在 2023-01-22 18:39:31 更新了该回帖
  • 查看全部回帖