Electron实现桌面日历

前言概述

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

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

        示例效果：

实现过程

        一、新建项目

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

        二、实现日历内容

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

        三、实现Electron功能

        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修改：

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

总结

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