【分享】日历面板

前言

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

如何使用?

  • 解压后,有一个【theme.js】,一个【日历】文件夹
  • 【日历】放到挂件所在那个文件夹,【theme.js】放到所用主题那里,或者复制到已有的 theme.js 中(总共也没几行)。
  • 清除缓存后刷新
4 操作
BryceAndJuly 在 2022-09-14 18:08:43 更新了该帖
BryceAndJuly 在 2022-09-14 18:07:57 更新了该帖
BryceAndJuly 在 2022-09-12 21:52:45 更新了该帖
BryceAndJuly 在 2022-09-12 20:37:00 更新了该帖

相关帖子

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...
  • 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
    订阅者

    好好好

请输入回帖内容 ...
融合块、大纲和双向链接
构建你永恒的数字花园
思源笔记是一款本地优先的个人知识管理系统,支持完全离线使用,同时也支持端到端加密同步