В этой статье я покажу вам, как написать динамический календарь с нуля с Node-JS & EJS. Итак, начнем.
Сначала мы хотим установить следующие зависимости в типе терминала
npm install --save express ejs
Далее мы хотим создать файл app.js и запустить сервер в нем
const express = require("express");
const app = express();
const port = 3000;
app.listen(port,()=>{
console.log("app is listening on port", port);
});
Теперь мы хотим создать отдельный файл конфигурации для нашего календаря. Создайте новый файл и назовите его «Calendar-config.js», и там мы можем написать функцию, которая рассчитала бы наш календарь на определенный год в течение любого времени, когда мы хотим его извлечь.
Эта функция будет генерировать 3D -массив и рассчитывать значения в течение определенного года
function calcTable(year) {
Создайте новый 3D -массив в течение нескольких месяцев и года.
let arr = new Array(12);
for (let x = 0; x < arr.length; x++) {
arr[x] = new Array(6);
}
for (let x = 0; x < arr.length; x++) {
for (let y = 0; y < arr[x].length; y++) {
arr[x][y] = new Array(7);
}
}
for (let month = 0; month < arr.length; month++) {
CALD, в какой день в неделю начинается конкретный месяц
let startDayInWeek = new Date(year, month, 0).getDay() + 1;
Учите за месяц
let monthLong = new Date(year, month + 1,0).getDate() + 1;
let beforCount = 0;
Счетчик представляет любой месяц, который начинается в первый день
let counter = 1;
Это выяснит, какой день недели начать считать дни
let startCount = false;
for (let x = 0; x < arr[month].length; x++) {
for (let y = 0; y < arr[month][x].length; y++) {
if (beforCount == startDayInWeek) {
startCount = true;
} else {
beforCount++;
}
if (startCount == true) {
arr[month][x][y] = counter;
counter++;
} else {
arr[month][x][y] = "";
}
if (counter > monthLong) {
arr[month][x][y] = "";
}
}
}
}
return arr;
}
module.exports = calcTable;
После того, как мы закончили настроить нашу функцию календаря, мы теперь можем вернуться на наш сервер и установить наш сервер, чтобы фактически вернуть календарь на веб -страницу.
Здесь мы устанавливаем нашу приложение Node View-двигатель в EJS и отмечаем, что я уже создал папку, называемую «представлениями», и я хранил там свой файл index.ejs
app.set("view-engine", "ejs");
const path = require('path');
__dirname = path.resolve();
app.use(express.static((path.join(__dirname, 'views'))));
Теперь давайте создадим метод GET, чтобы фактически вернуть наш календарь клиенту
app.get("/",(req,res)=>{
const year = req.query.year || 2020;
const months = ["January", "February", "March", "April", "May", "June", "July",
"August", "September", "October", "November", "December"];
res.render("index.ejs",{calendar: calendar(year),months,year});
});
Вы можете видеть, что мы установили значение «Год» до 2020 года по умолчанию. Каждый раз, когда пользователь запрашивает год, функция конфигурации календаря будет рассчитывать новые значения и вернуться на веб -страницу.
Тело index.ejs выглядит примерно так:
welcome to my calendar
year <%= year %>
<% for(let month = 0;month < calendar.length;month++) { %><% } %><%= months[month] %>
SunMonTue WedThuFriSat<% for(let x = 0;x < calendar[month].length;x++) { %><% for(let y = 0;y < calendar[month][x].length;y++) { %><% } %><% } %><%= calendar[month][x][y] %>
Если вы знакомы с EJS, вы, вероятно, знаете, что в этом шаблоне мы зацикливаем массив календаря и представляем значения клиенту. Есть так много вещей, которые вы можете сделать с этим кодом, но моя цель – дать вам основы, чтобы вы могли создать свое собственное удивительное календарное приложение.
Ссылка на мой полный пример в GitHub: Link https://github.com/536uriel/nodejs-calendar.git
Оригинал: “https://dev.to/536uriel/how-to-build-basic-and-dynamic-calendar-with-nodejs-1f8c”