Electron实现桌面日历

清疚 2022-10-09 14:27 230阅读 0赞

### **前言概述** ###

本文介绍使用Electron来实现桌面日历示例，该桌面日历可切换年份和月份的数据，可显示假期的数据等不同功能；

开发环境：node12.14.1+electron10.1.5

示例效果：

![20210625092019511.gif][]

### **实现过程** ###

**   **     **一、新建项目**

参考前面文章《Electron桌面应用程序从创建项目、启动项目到打包程序的详细过程》；

**        二、实现日历内容**

可自己实现日历功能或者网上搜索示例，然后嵌套进Electron里面；如果需要本例效果，可到链接“https://pan.baidu.com/s/1HFfTyo8YvlhqOxgDXk\_VEQ”下载（提取码“m4it”）；

**        三、实现Electron功能**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpbmcwOTY0_size_16_color_FFFFFF_t_70][]

**        main.js修改：**

1. 设置外框：

*  Menu.setApplicationMenu(null)隐藏菜单栏；
 *  frame: false设置无边框；
 *  mainWindow.setAlwaysOnTop(true, 'screen-saver', 2)边框置顶；

2. 窗口定位：

*  x: width,y: 50：width等于屏幕宽度减去窗口的宽度，所以最终效果定位于屏幕的右上角；

3. 设置透明效果：

*  transparent: true，devTools: false：一般设置这两个即可，但如果嵌套的网页有背景色，也需要去掉才能有效果；

**        index.html修改：**

由于隐藏了菜单和无边框，导致没办法直接关闭，所以在页面上增加右键菜单，并包括“关闭窗口”功能，代码如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpbmcwOTY0_size_16_color_FFFFFF_t_70 1][]

### **总结** ###

该实例到此就已经介绍完毕，大家可在此基础上增加更多优化的功能。

![20210625093844992.jpg][]

[20210625092019511.gif]: /images/20221005/3c50107b27df48c88cdd0a1a42009294.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpbmcwOTY0_size_16_color_FFFFFF_t_70]: /images/20221005/f13e5cb3585f4b339b018885a6ac9ea0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpbmcwOTY0_size_16_color_FFFFFF_t_70 1]: /images/20221005/c7cd98f5f97041b7bff1aacd32fd4a5c.png
[20210625093844992.jpg]: /images/20221005/6324cba7cfe947dfbbd842f289677175.png