带有事件的简单 Javascript 日历

已于 2022-05-29 21:08:20 修改
阅读量1.1k 收藏 7
点赞数 1
文章标签： javascript html 前端
于 2022-05-29 20:47:52 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/allway2/article/details/125036016
版权

欢迎来到关于如何创建简单的纯 Javascript 日历的教程。您是否希望在不使用任何服务器端脚本的情况下开发日历 Web 应用程序？无论是商业项目、学校项目还是只是出于好奇——您来对地方了。本指南将引导您了解如何创建纯 Javascript 日历，所有这些都可以通过本地存储实现。继续阅读！

ⓘ 我在本教程开始时包含了一个包含所有源代码的 zip 文件，因此您不必复制粘贴所有内容……或者如果您只是想直接进入。

 

速记

  • 如果您想将日历设置为从星期一开始一周，请cal.sMon = true在calendar.js.

如果您发现错误，请随时在下面发表评论。我也尝试回答简短的问题，但这是一个人与整个世界的对比……如果您急需答案，请查看我的网站列表以获取编程帮助。

 

示例代码下载

单击此处下载源代码，我已在 MIT 许可下发布它，因此请随意在其上构建或在您自己的项目中使用它。

 

JAVASCRIPT 日历演示

 

日历如何运作

好的，现在让我们更详细地了解日历的工作原理。不打算逐行解释，但这里有一个快速演练。

 

第 1 部分）日历 HTML

日历.html 
<div id="cal-wrap">
  <!-- (A) PERIOD SELECTOR -->
  <div id="cal-date">
    <select id="cal-mth"></select>
    <select id="cal-yr"></select>
  </div>

  <!-- (B) CALENDAR -->
  <div id="cal-container"></div>

  <!-- (C) EVENT FORM -->
  <form id="cal-event">
    <h1 id="evt-head"></h1>
    <div id="evt-date"></div>
    <textarea id="evt-details" required></textarea>
    <input id="evt-close" type="button" value="Close"/>
    <input id="evt-del" type="button" value="Delete"/>
    <input id="evt-save" type="submit" value="Save"/>
  </form>
</div>

HTML 应该足够简单，这里只有 3 个部分：

  • <div id="cal-date">月份和年份选择器。
  • <div id="cal-container">我们将在其中显示所选月份和年份的日历。
  • <form id="cal-event">添加/编辑日历事件的表单。

 

 

第 2 部分）日历初始化

日历.js 
var cal = {
  // (A) PROPERTIES
  // (A1) COMMON CALENDAR
  sMon : false, // Week start on Monday?
  mName : ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"], // Month Names
 
  // (A2) CALENDAR DATA
  data : null, // Events for the selected period
  sDay : 0, sMth : 0, sYear : 0, // Current selected day, month, year
 
  // (A3) COMMON HTML ELEMENTS
  hMth : null, hYear : null, // month/year selector
  hForm : null, hfHead : null, hfDate : null, hfTxt : null, hfDel : null, // event form
 
  // (B) INIT CALENDAR
  init : () => {
    // (B1) GET + SET COMMON HTML ELEMENTS
    cal.hMth = document.getElementById("cal-mth");
    cal.hYear = document.getElementById("cal-yr");
    cal.hForm = document.getElementById("cal-event");
    cal.hfHead = document.getElementById("evt-head");
    cal.hfDate = document.getElementById("evt-date");
    cal.hfTxt = document.getElementById("evt-details");
    cal.hfDel = document.getElementById("evt-del");
    document.getElementById("evt-close").onclick = cal.close;
    cal.hfDel.onclick = cal.del;
    cal.hForm.onsubmit = cal.save;
 
    // (B2) DATE NOW
    let now = new Date(),
        nowMth = now.getMonth(),
        nowYear = parseInt(now.getFullYear());
 
    // (B3) APPEND MONTHS SELECTOR
    for (let i=0; i<12; i++) {
      let opt = document.createElement("option");
      opt.value = i;
      opt.innerHTML = cal.mName[i];
      if (i==nowMth) { opt.selected = true; }
      cal.hMth.appendChild(opt);
    }
    cal.hMth.onchange = cal.list;
 
    // (B4) APPEND YEARS SELECTOR
    // Set to 10 years range. Change this as you like.
    for (let i=nowYear-10; i<=nowYear+10; i++) {
      let opt = document.createElement("option");
      opt.value = i;
      opt.innerHTML = i;
      if (i==nowYear) { opt.selected = true; }
      cal.hYear.appendChild(opt);
    }
    cal.hYear.onchange = cal.list;
 
    // (B5) START - DRAW CALENDAR
    cal.list();
};
window.addEventListener("load", cal.init);

cal.init()是在页面加载时运行以初始化日历的第一件事。乍一看很复杂，但要冷静仔细看——它所做的只是设置HTML界面：

  • 将月份添加到选择器。
  • 向选择器添加年份。
  • 附加添加/编辑事件表单单击并提交处理程序。

就这样。

 

 

第 3 部分）绘制日历

日历.js 
// (C) DRAW CALENDAR FOR SELECTED MONTH
list : () => {
  // (C1) BASIC CALCULATIONS - DAYS IN MONTH, START + END DAY
  // Note - Jan is 0 & Dec is 11
  // Note - Sun is 0 & Sat is 6
  cal.sMth = parseInt(cal.hMth.value); // selected month
  cal.sYear = parseInt(cal.hYear.value); // selected year
  let daysInMth = new Date(cal.sYear, cal.sMth+1, 0).getDate(), // number of days in selected month
      startDay = new Date(cal.sYear, cal.sMth, 1).getDay(), // first day of the month
      endDay = new Date(cal.sYear, cal.sMth, daysInMth).getDay(), // last day of the month
      now = new Date(), // current date
      nowMth = now.getMonth(), // current month
      nowYear = parseInt(now.getFullYear()), // current year
      nowDay = cal.sMth==nowMth && cal.sYear==nowYear ? now.getDate() : null ;
 
  // (C2) LOAD DATA FROM LOCALSTORAGE
  cal.data = localStorage.getItem("cal-" + cal.sMth + "-" + cal.sYear);
  if (cal.data==null) {
  localStorage.setItem("cal-" + cal.sMth + "-" + cal.sYear, "{}");
  cal.data = {};
  } else { cal.data = JSON.parse(cal.data); }
 
  // (C3) DRAWING CALCULATIONS
  // Blank squares before start of month
  let squares = [];
  if (cal.sMon && startDay != 1) {
    let blanks = startDay==0 ? 7 : startDay ;
    for (let i=1; i<blanks; i++) { squares.push("b"); }
  }
  if (!cal.sMon && startDay != 0) {
    for (let i=0; i<startDay; i++) { squares.push("b"); }
  }
 
  // Days of the month
  for (let i=1; i<=daysInMth; i++) { squares.push(i); }
 
  // Blank squares after end of month
  if (cal.sMon && endDay != 0) {
    let blanks = endDay==6 ? 1 : 7-endDay;
    for (let i=0; i<blanks; i++) { squares.push("b"); }
  }
  if (!cal.sMon && endDay != 6) {
    let blanks = endDay==0 ? 6 : 6-endDay;
    for (let i=0; i<blanks; i++) { squares.push("b"); }
  }
 
  // (C4) DRAW HTML CALENDAR
  // Get container
  let container = document.getElementById("cal-container"),
      cTable = document.createElement("table");
  cTable.id = "calendar";
  container.innerHTML = "";
  container.appendChild(cTable);

  // First row - Day names
  let cRow = document.createElement("tr"),
      days = ["Sun", "Mon", "Tue", "Wed", "Thur", "Fri", "Sat"];
  if (cal.sMon) { days.push(days.shift()); }
  for (let d of days) {
    let cCell = document.createElement("td");
    cCell.innerHTML = d;
    cRow.appendChild(cCell);
  }
  cRow.classList.add("head");
  cTable.appendChild(cRow);

  // Days in Month
  let total = squares.length;
  cRow = document.createElement("tr");
  cRow.classList.add("day");
  for (let i=0; i<total; i++) {
    let cCell = document.createElement("td");
    if (squares[i]=="b") { cCell.classList.add("blank"); }
    else {
      if (nowDay==squares[i]) { cCell.classList.add("today"); }
      cCell.innerHTML = `<div class="dd">${squares[i]}</div>`;
      if (cal.data[squares[i]]) {
        cCell.innerHTML += "<div class='evt'>" + cal.data[squares[i]] + "</div>";
      }
      cCell.onclick = () => { cal.show(cCell); };
    }
    cRow.appendChild(cCell);
    if (i!=0 && (i+1)%7==0) {
      cTable.appendChild(cRow);
      cRow = document.createElement("tr");
      cRow.classList.add("day");
    }
  }
 
  // (C5) REMOVE ANY PREVIOUS ADD/EDIT EVENT DOCKET
  cal.close();
}

cal.list()绘制当前选择的月/年的日历，是本项目中最复杂的功能。长话短说：

  • (C1 & C2)事件数据localStorage按月保存 ( cal-MONTH-YEAR = JSON ENCODED OBJECT)。
  • (C1 & C2)检索所选月/年的事件数据，并将其放入cal.data.
  • (C3)首先进行所有计算squares = []。
  • (C4)然后，循环squares绘制 HTML 日历。

 

 

第 4 部分）显示/编辑日历事件

日历.js 
// (D) SHOW EDIT EVENT DOCKET FOR SELECTED DAY
show : (el) => {
  // (D1) FETCH EXISTING DATA
  cal.sDay = el.getElementsByClassName("dd")[0].innerHTML;
  let isEdit = cal.data[cal.sDay] !== undefined ;

  // (D2) UPDATE EVENT FORM
  cal.hfTxt.value = isEdit ? cal.data[cal.sDay] : "" ;
  cal.hfHead.innerHTML = isEdit ? "EDIT EVENT" : "ADD EVENT" ;
  cal.hfDate.innerHTML = `${cal.sDay} ${cal.mName[cal.sMth]} ${cal.sYear}`;
  if (isEdit) { cal.hfDel.classList.remove("ninja"); }
  else { cal.hfDel.classList.add("ninja"); }
  cal.hForm.classList.remove("ninja");
},

// (E) CLOSE EVENT DOCKET
close : () => {
  cal.hForm.classList.add("ninja");
}

当用户点击一个日期单元格时，cal.show()将被调用。不言自明——我们从 获取事件cal.data，然后显示添加/编辑事件表单。

 

第 5 部分）保存/删除事件数据

日历.js 
// (F) SAVE EVENT
save : () => {
  cal.data[cal.sDay] = cal.hfTxt.value;
  localStorage.setItem(`cal-${cal.sMth}-${cal.sYear}`, JSON.stringify(cal.data));
  cal.list();
  return false;
},

// (G) DELETE EVENT FOR SELECTED DATE
del : () => { if (confirm("Delete event?")) {
  delete cal.data[cal.sDay];
  localStorage.setItem(`cal-${cal.sMth}-${cal.sYear}`, JSON.stringify(cal.data));
  cal.list();
}

最后，这些都是不言自明的函数——我们只是简单地更新localStorage.

 

 

有用的信息和链接

最后，这里还有一些可能有用的附加功能。

 

每天有多个事件？

我们当然可以。我们来看看当前的save()函数：

cal.data[cal.sDay] = cal.hfTxt.value;

我们现在几乎存储了事件数据data[DAY] = EVENT。所以要允许同一天发生多个事件，大体思路是把当前结构变成多维数组data[DAY] = [EVENT, EVENT, EVENT]。

cal.data[cal.sDay] = [];
cal.data[cal.sDay].push(document.getElementById("evt-details").value);

那么，大问题来了。我们必须重做所有其余的功能才能正确绘制多个事件并管理它们。

  • 在 HTML 中添加更多文本字段。
  • save()包括额外的文本字段。
  • list()绘制额外的数据。
  • show()也填充额外的文本字段。

你可以猜到，这将成倍增加复杂性，把它变成一个“不简单的教程”。这就是为什么我不回答“支持多个事件”和“跨越多天的事件”问题的原因——尽管请随意挑战自己，这个简单的日历是一个很好的起点。

 

限制

  • 一天只允许一个事件。
  • 事件不能跨越多天。
  • Javascript 日历需要使用本地存储。如果它在浏览器上被禁用或不受支持，那么它将根本无法保存事件。

但是，当然，我已将其作为开源发布。因此，请随意调整它，但您认为合适。

完整汉化源码

calendar.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Simple Javascript Calendar</title>
        <link href="calendar.css" rel="stylesheet">
        <script async src="calendar.js"></script>
    </head>
    <body>
        <div id="cal-wrap">
            <!-- (A) PERIOD SELECTOR -->
            <div id="cal-date">
                <select id="cal-yr"></select>
                <select id="cal-mth"></select>
            </div>

            <!-- (B) CALENDAR -->
            <div id="cal-container"></div>

            <!-- (C) EVENT FORM -->
            <form id="cal-event">
                <h1 id="evt-head"></h1>
                <div id="evt-date"></div>
                <textarea id="evt-details" required></textarea>
                <input id="evt-close" type="button" value="Close"/>
                <input id="evt-del" type="button" value="Delete"/>
                <input id="evt-save" type="submit" value="Save"/>
            </form>
        </div>
    </body>
</html>

calendar.css

/* (A) ENTIRE PAGE */
#cal-wrap * {
    font-family: arial, sans-serif;
}
.ninja {
    display: none !important;
}

/* (B) CONTAINER */
#cal-wrap {
    max-width: 600px;
}

/* (C) PERIOD SELECTOR */
#cal-date {
    display: flex;
    justify-content: space-between;
}
#cal-mth, #cal-yr {
    box-sizing: border-box;
    padding: 10px 20px;
    font-size: 1.2em;
    border: 0;
}

/* (D) CALENDAR */
#calendar {
    width: 100%;
    border-collapse: collapse;
}
#calendar tr.head td {
    font-weight: bold;
    text-transform: uppercase;
    color: #fff;
    background: #f37070;
    padding: 15px;
    text-align: center;
}
#calendar tr.day td {
    border: 1px solid #ddd;
    width: 14.28%;
    padding: 15px 5px;
    vertical-align: top;
}
#calendar tr.day td:hover {
    background: #fff9e4;
    cursor: pointer;
}
#calendar tr td.blank {
    background: #f5f5f5;
}
#calendar tr td.today {
    background: #ffdede;
}
#calendar .dd {
    font-size: 1.2em;
    color: #999;
}
#calendar .evt {
    margin-top: 5px;
    font-size: 0.8em;
    font-weight: bold;
    overflow: hidden;
    color: #ff5d5d;
}

/* (E) ADD/EDIT EVENT */
#cal-event {
    padding: 15px;
    margin-top: 20px;
    background: #f5f5f5;
    border: 1px solid #ddd;
}
#cal-event h1 {
    color: #333;
    padding: 0;
    margin: 0;
}
#evt-date {
    color: #555;
    margin: 10px 0;
}
#cal-event textarea {
    display: block;
    box-sizing: border-box;
    width: 100%;
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #ddd;
    min-height: 100px;
}
#cal-event input[type=button], #cal-event input[type=submit] {
    padding: 10px;
    margin: 5px;
    font-size: 1.2em;
    border: 0;
    background: #ea4c4c;
    color: #fff;
}

calendar.js

var cal = {
    // (A) PROPERTIES
    // (A1) COMMON CALENDAR
    sMon: true, // Week start on Monday?
    mName: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"], // Month Names

    // (A2) CALENDAR DATA
    data: null, // Events for the selected period
    sDay: 0, sMth: 0, sYear: 0, // Current selected day, month, year

    // (A3) COMMON HTML ELEMENTS
    hMth: null, hYear: null, // month/year selector
    hForm: null, hfHead: null, hfDate: null, hfTxt: null, hfDel: null, // event form

    // (B) INIT CALENDAR
    init: () => {
        // (B1) GET + SET COMMON HTML ELEMENTS
        cal.hMth = document.getElementById("cal-mth");
        cal.hYear = document.getElementById("cal-yr");
        cal.hForm = document.getElementById("cal-event");
        cal.hfHead = document.getElementById("evt-head");
        cal.hfDate = document.getElementById("evt-date");
        cal.hfTxt = document.getElementById("evt-details");
        cal.hfDel = document.getElementById("evt-del");
        document.getElementById("evt-close").onclick = cal.close;
        cal.hfDel.onclick = cal.del;
        cal.hForm.onsubmit = cal.save;

        // (B2) DATE NOW
        let now = new Date(),
                nowMth = now.getMonth(),
                nowYear = parseInt(now.getFullYear());

        // (B3) APPEND MONTHS SELECTOR
        for (let i = 0; i < 12; i++) {
            let opt = document.createElement("option");
            opt.value = i;
            opt.innerHTML = cal.mName[i];
            if (i == nowMth) {
                opt.selected = true;
            }
            cal.hMth.appendChild(opt);
        }
        cal.hMth.onchange = cal.list;

        // (B4) APPEND YEARS SELECTOR
        // Set to 10 years range. Change this as you like.
        for (let i = nowYear - 10; i <= nowYear + 10; i++) {
            let opt = document.createElement("option");
            opt.value = i;
            opt.innerHTML = i;
            if (i == nowYear) {
                opt.selected = true;
            }
            cal.hYear.appendChild(opt);
        }
        cal.hYear.onchange = cal.list;

        // (B5) START - DRAW CALENDAR
        cal.list();
    },

    // (C) DRAW CALENDAR FOR SELECTED MONTH
    list: () => {
        // (C1) BASIC CALCULATIONS - DAYS IN MONTH, START + END DAY
        // Note - Jan is 0 & Dec is 11
        // Note - Sun is 0 & Sat is 6
        cal.sMth = parseInt(cal.hMth.value); // selected month
        cal.sYear = parseInt(cal.hYear.value); // selected year
        let daysInMth = new Date(cal.sYear, cal.sMth + 1, 0).getDate(), // number of days in selected month
                startDay = new Date(cal.sYear, cal.sMth, 1).getDay(), // first day of the month
                endDay = new Date(cal.sYear, cal.sMth, daysInMth).getDay(), // last day of the month
                now = new Date(), // current date
                nowMth = now.getMonth(), // current month
                nowYear = parseInt(now.getFullYear()), // current year
                nowDay = cal.sMth == nowMth && cal.sYear == nowYear ? now.getDate() : null;

        // (C2) LOAD DATA FROM LOCALSTORAGE
        cal.data = localStorage.getItem("cal-" + cal.sMth + "-" + cal.sYear);
        if (cal.data == null) {
            localStorage.setItem("cal-" + cal.sMth + "-" + cal.sYear, "{}");
            cal.data = {};
        } else {
            cal.data = JSON.parse(cal.data);
        }

        // (C3) DRAWING CALCULATIONS
        // Blank squares before start of month
        let squares = [];
        if (cal.sMon && startDay != 1) {
            let blanks = startDay == 0 ? 7 : startDay;
            for (let i = 1; i < blanks; i++) {
                squares.push("b");
            }
        }
        if (!cal.sMon && startDay != 0) {
            for (let i = 0; i < startDay; i++) {
                squares.push("b");
            }
        }

        // Days of the month
        for (let i = 1; i <= daysInMth; i++) {
            squares.push(i);
        }

        // Blank squares after end of month
        if (cal.sMon && endDay != 0) {
            let blanks = endDay == 6 ? 1 : 7 - endDay;
            for (let i = 0; i < blanks; i++) {
                squares.push("b");
            }
        }
        if (!cal.sMon && endDay != 6) {
            let blanks = endDay == 0 ? 6 : 6 - endDay;
            for (let i = 0; i < blanks; i++) {
                squares.push("b");
            }
        }

        // (C4) DRAW HTML CALENDAR
        // Get container
        let container = document.getElementById("cal-container"),
                cTable = document.createElement("table");
        cTable.id = "calendar";
        container.innerHTML = "";
        container.appendChild(cTable);

        // First row - Day names
        let cRow = document.createElement("tr"),
                days = ["日", "一", "二", "三", "四", "五", "六"];
        if (cal.sMon) {
            days.push(days.shift());
        }
        for (let d of days) {
            let cCell = document.createElement("td");
            cCell.innerHTML = d;
            cRow.appendChild(cCell);
        }
        cRow.classList.add("head");
        cTable.appendChild(cRow);

        // Days in Month
        let total = squares.length;
        cRow = document.createElement("tr");
        cRow.classList.add("day");
        for (let i = 0; i < total; i++) {
            let cCell = document.createElement("td");
            if (squares[i] == "b") {
                cCell.classList.add("blank");
            } else {
                if (nowDay == squares[i]) {
                    cCell.classList.add("today");
                }
                cCell.innerHTML = `<div class="dd">${squares[i]}</div>`;
                if (cal.data[squares[i]]) {
                    cCell.innerHTML += "<div class='evt'>" + cal.data[squares[i]] + "</div>";
                }
                cCell.onclick = () => {
                    cal.show(cCell);
                };
            }
            cRow.appendChild(cCell);
            if (i != 0 && (i + 1) % 7 == 0) {
                cTable.appendChild(cRow);
                cRow = document.createElement("tr");
                cRow.classList.add("day");
            }
        }

        // (C5) REMOVE ANY PREVIOUS ADD/EDIT EVENT DOCKET
        cal.close();
    },

    // (D) SHOW EDIT EVENT DOCKET FOR SELECTED DAY
    show: (el) => {
        // (D1) FETCH EXISTING DATA
        cal.sDay = el.getElementsByClassName("dd")[0].innerHTML;
        let isEdit = cal.data[cal.sDay] !== undefined;

        // (D2) UPDATE EVENT FORM
        cal.hfTxt.value = isEdit ? cal.data[cal.sDay] : "";
        cal.hfHead.innerHTML = isEdit ? "EDIT EVENT" : "ADD EVENT";
        cal.hfDate.innerHTML = `${cal.sDay} ${cal.mName[cal.sMth]} ${cal.sYear}`;
        if (isEdit) {
            cal.hfDel.classList.remove("ninja");
        } else {
            cal.hfDel.classList.add("ninja");
        }
        cal.hForm.classList.remove("ninja");
    },

    // (E) CLOSE EVENT DOCKET
    close: () => {
        cal.hForm.classList.add("ninja");
    },

    // (F) SAVE EVENT
    save: () => {
        cal.data[cal.sDay] = cal.hfTxt.value;
        localStorage.setItem(`cal-${cal.sMth}-${cal.sYear}`, JSON.stringify(cal.data));
        cal.list();
        return false;
    },

    // (G) DELETE EVENT FOR SELECTED DATE
    del: () => {
        if (confirm("Delete event?")) {
            delete cal.data[cal.sDay];
            localStorage.setItem(`cal-${cal.sMth}-${cal.sYear}`, JSON.stringify(cal.data));
            cal.list();
        }
    }
};
window.addEventListener("load", cal.init);

allway2
关注
漂亮的jQuery事件日历插件calendar.js
09-13
漂亮的jQuery事件日历插件calendar.js，在html可以只需要简单的引用，....................................................
simplecalendar.js记录事件的日历插件
11-24
simplecalendar.js记录事件的日历插件
JS实现日历
最新发布
Cc040909的博客
10-11 926
【代码】JS实现日历。
基于jquery的带事件显示功能的日历板插件calendar.js
weixin_30344795的博客
04-27 1336
项目中需要用到一个日历板控件，要求能显示事件，于是想到了一年前在app项目上写的一个粗略版日历板，然后又想着这个可能以后还会用 于是我就封装了一下，能满足基本要求，如果有需要更多功能的也可以自行修改源码，源码未压缩未代码混淆且有注释。 封装的是基础版，仅能展示一般日历板功能和正常显示事件数据。 再往后就涉及到项目的业务了，就不便展示了。 以下为地址： https://gitee.com/...
跟我做：Javascript 下的日历控件（Calendar）
weixin_34144848的博客
08-24 128
    右侧是该控件的示范应用，朋友们可点击试用: 下载源码(20080824)     曾经，我发布过《几个Javascript类》，得到部分朋友的支持；有道是，授之予鱼，不如授之予渔。同时结合朋友们的评价，我对该日历控件做了兼容性检查，已经“基本”支持火狐浏览器应用了；遗留一个小问题，火狐下面“日”提取有问题，不知道有兴趣的朋友能不能在读完本文后自己动手修正该漏洞（提示：火狐不支...
js-event-calendar:基于js的每日活动日历
05-16
js-event-calendar 基于js的每日事件日历创建一个函数，该函数接受一组对象，每个对象代表一个事件。 数组中的每个对象都有以分钟表示的开始和结束时间。 开始时间和结束时间表示为上午9点后的分钟。 例如{start：30，end：60}代表一个事件，该事件开始于9:30 am，结束于10am。 该函数获取对象，并将其绘制为垂直时间轴上的事件。 具有交叉的事件会将容器分成两半，而没有交叉的事件将占用整个容器的宽度。
javascript实现带节日和农历的日历特效
10-24
为了生成带节日和农历的日历特效，JavaScript代码中必然还包含有日期计算的算法，根据公历日期推导出农历日期，以及判断给定日期上是否有特定的节日。同时，为了实现一个直观的日历界面，还需要用到HTML和CSS等技术...
JavaScript实现简单的日历效果
11-26
总结来说，这个简单的JavaScript日历模板提供了一个基础框架，你可以在此基础上扩展，例如添加日期选择功能、添加节假日标记、支持多语言等。通过理解并实践这些核心函数，你可以更好地掌握JavaScript处理日期和时间...
calendar源码java-JavaScriptMovieCalendar:JavaScript电影日历项目。带有HTML和CSS的纯Jav
05-19
这要求开发者对JavaScript有深入理解，能够处理DOM操作、事件监听、AJAX请求等常见任务。 “HTML和CSS”是构建用户界面的基础，HTML负责结构，CSS负责样式。在这个项目中，HTML定义了页面的布局和元素，CSS则用来...
javascript 日历提醒系统( 兼容所有浏览器 )
10-30
JavaScript日历提醒系统是一种基于纯JavaScript和CSS构建的轻量级插件，旨在提供跨浏览器的日历功能，并具有提醒功能。这个系统不依赖任何外部库，因此可以保证代码的简洁性和执行效率。以下是对该系统关键特性的...
calendar-app:带有事件徽章和更好通知的桌面日历
05-25
带有即将到来的事件计数器的徽章（接下来的4小时） 正在安装 从发行版下载现成的软件包或在本地构建 克隆回购 npm安装 ./build-macosx.sh 进入Google Calendar-darwin-x64然后将Google Calendar.app复制到/...
很漂亮的js日历，时间从1970年到2040年，可以自己修改，在需要添加时间的标签上添加一个点击事件
10-09
很漂亮的js日历，时间从1970年到2040年，可以自己修改，在需要添加时间的标签上添加一个点击事件 onclick="new Calendar().show(this);"
事件日历：简单事件日历
02-14
事件日历 简单事件日历
Calendar:JavaScript实现的可以查看、添加、删除待办事项的日历控件
06-17
Calendar JavaScript实现的日历控件，包括显示日历、显示待办事项的月统计数、当前日统计数、选中日期的待办事项列表展示、待办事项添加、删除等功能。 2015年3月21号更新
event_calendar:活动日历
06-02
活动日历 iCalendar / jCal 兼容（MIT 许可） 这是 iCalendar 和 jCal 兼容的事件日历组件的开始。 我目前正在研究结合了 Web 浏览器 UI 的 Node JS 服务器实现。 在前端，它具有日历视图、简单的输入表单和自定义输入表单。 两种输入形式都支持重复事件。 简单的形式允许用户指定基本数据，如开始日期、结束日期和简单的重复频率，如“每天”。 自定义表单为 icalendar 属性提供了更广泛的支持。 后端是一个Node JS模块，将数据保存到couchdb。 我计划在未来支持其他数据库，例如 postgresql。 这个项目还处于起步阶段，所以我不建议将它用于任何事情。
jQuery多功能日历插件 带事件记录功能
08-23
之前我们也已经分享过不少jQuery日历插件，有些应用了CSS3的特性，外观就特别漂亮。今天要分享的这款jQuery日历插件不仅有着绚丽的外观，而且带有日期事件记录功能，点击日期即可展开事件记录窗口，你可以设置事件的描述以及提醒的时间，是一款相对实用的jQuery日历插件。 接下来我们一起来看看实现这款jQuery带事件记录功能的日历插件的实现过程及源码，代码主要由HTML、CSS和jQuery组成。 HTML代码： <div id="myId" class="jalendar"> <div class="added-event" data-date="14/12/2017" data-time="Tüm Gün" data-title="WWDC 13 on San Francisco, LA"></div> <div class="added-event" data-date="16/12/2017" data-time="20:45" data-title="Tarka[......] 阅读全文>>
2019年最佳JavaScript日历和事件日历脚本
代码教主
06-22 1037
您可能要在网站上使用日历脚本的原因有很多。 其中最常见的是列出和安排事件。 另一个用途是提供一个链接，以列出在特定日期发布的所有博客文章或新闻事件。 在某些情况下，您可能只是在寻找日期和时间范围选择器。 在这篇文章中，我将分享一些2019年最佳JavaScript日历脚本和插件的精选。 简单活动日历 我们列表中的第一个脚本是评级很高的“ 简单事件日历” 。 它基于jQuery，并支持...
js框架 dwz jui 的日历组件 添加自定义事件
wxljmy的专栏
10-09 4736
1.dwz.datepicker.js中     $.fn.datepicker = function(opts){         //alert('kk');         var onseldate=null;         onseldate=opts.onseldate;                             if (!dp.hasTime
js全屏日历插件带事件记录
ICode联盟
08-20 284
下载地址js全屏日历插件带事件记录，js日历表添加每日事项内容和更改主题颜色，日历笔记应用功能代码。 dd:
JavaScript实现的日历文本：带农历显示功能
这个文档可能是对农历日历算法的说明，或者是如何将农历集成到JavaScript日历组件中的指导文档。如果这是一个Word文档，开发者可能需要使用Microsoft Word或其他兼容的文档编辑软件打开和阅读。 在技术层面上，创建...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值