kalendarz zmianowy

Kalendarz zmianowy całoroczny w JavaScript

przez

Zastanawiałeś się kiedyś, jak stworzyć kalendarz zmianowy na cały rok w JavaScript? Jeśli masz do czynienia z planowaniem grafiku dla zespołu, pracą zmianową lub chcesz po prostu mieć wizualizację swojego harmonogramu, to jesteś we właściwym miejscu. W tym artykule przeprowadzę Cię krok po kroku przez proces tworzenia takiego kalendarza. Będzie prosto, bez zbędnego żargonu, a na koniec – kod gotowy do użytku. Gotowy? No to zaczynamy!

Dlaczego kalendarz zmianowy w JavaScript?

JavaScript to świetne narzędzie do manipulowania datami i interaktywnymi elementami na stronie. Dzięki niemu możesz stworzyć dynamiczny i interaktywny kalendarz, który nie tylko pokaże zmiany, ale będzie można go modyfikować, aktualizować, a nawet integrować z backendem.

Korzyści z użycia JavaScript:

  1. Elastyczność – Możesz dostosować wygląd i funkcjonalność do swoich potrzeb.
  2. Dynamiczność – Zmiany można dodawać w czasie rzeczywistym.
  3. Uniwersalność – Gotowe narzędzia, jak biblioteka Date i frameworki np. React, ułatwiają życie.

Jak zaplanować tworzenie kalendarza?

Przygotowanie kalendarza zmianowego wymaga:

  1. Określenia zakresu dat – Czy będzie to rok, miesiąc, czy może bardziej szczegółowe dni?
  2. Definicji zmian – Jakie zmiany chcesz uwzględnić? Poranna, popołudniowa, nocna?
  3. Stylizacji – Jak ma wyglądać graficznie? Prosty tabelaryczny widok, czy coś bardziej interaktywnego?

Przykład – Harmonogram zmian 3-2-2

Wyobraźmy sobie, że Twoja firma stosuje system pracy zmianowej, gdzie pracownicy:

  • 3 dni pracują,
  • 2 dni mają wolne,
  • 2 dni są na innej zmianie.

To właśnie na takim przykładzie opieramy nasz kalendarz.

Krok 1: Tworzymy szkielet HTML

Na początek stwórzmy prosty szkielet strony, który wyświetli kalendarz.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Tworzenie kalendarza zmianowego w JavaScript – prosty poradnik">
<meta name="keywords" content="kalendarz, JavaScript, zmiany, harmonogram, praca zmianowa">
<meta name="author" content="Twoje Imię">
<title>Kalendarz zmianowy</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
padding: 0;
background-color: #f7f7f7;
color: #333;
}
.calendar {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 10px;
margin-top: 20px;
}
.day {
background-color: #fff;
border: 1px solid #ddd;
border-radius: 5px;
text-align: center;
padding: 10px;
}
.day.work {
background-color: #d4edda;
}
.day.rest {
background-color: #f8d7da;
}
.day.night {
background-color: #d1ecf1;
}
</style>
</head>
<body>
<h1>Kalendarz zmianowy</h1>
<div id="calendar" class="calendar"></div>
<script src="script.js"></script>
</body>
</html>
<!DOCTYPE html> <html lang="pl"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content="Tworzenie kalendarza zmianowego w JavaScript – prosty poradnik"> <meta name="keywords" content="kalendarz, JavaScript, zmiany, harmonogram, praca zmianowa"> <meta name="author" content="Twoje Imię"> <title>Kalendarz zmianowy</title> <style> body { font-family: Arial, sans-serif; margin: 20px; padding: 0; background-color: #f7f7f7; color: #333; } .calendar { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; margin-top: 20px; } .day { background-color: #fff; border: 1px solid #ddd; border-radius: 5px; text-align: center; padding: 10px; } .day.work { background-color: #d4edda; } .day.rest { background-color: #f8d7da; } .day.night { background-color: #d1ecf1; } </style> </head> <body> <h1>Kalendarz zmianowy</h1> <div id="calendar" class="calendar"></div> <script src="script.js"></script> </body> </html>
<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Tworzenie kalendarza zmianowego w JavaScript – prosty poradnik">
    <meta name="keywords" content="kalendarz, JavaScript, zmiany, harmonogram, praca zmianowa">
    <meta name="author" content="Twoje Imię">
    <title>Kalendarz zmianowy</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
            padding: 0;
            background-color: #f7f7f7;
            color: #333;
        }
        .calendar {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            gap: 10px;
            margin-top: 20px;
        }
        .day {
            background-color: #fff;
            border: 1px solid #ddd;
            border-radius: 5px;
            text-align: center;
            padding: 10px;
        }
        .day.work {
            background-color: #d4edda;
        }
        .day.rest {
            background-color: #f8d7da;
        }
        .day.night {
            background-color: #d1ecf1;
        }
    </style>
</head>
<body>
    <h1>Kalendarz zmianowy</h1>
    <div id="calendar" class="calendar"></div>
    <script src="script.js"></script>
</body>
</html>

Ten szkielet HTML definiuje podstawowy układ strony z prostym kontenerem na nasz kalendarz.

Krok 2: Logika w JavaScript

Teraz czas na magię w JavaScript. Użyjemy biblioteki Date, by generować dni roku i oznaczać je odpowiednimi zmianami.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
// Pobierz kontener kalendarza
const calendar = document.getElementById('calendar');
// Funkcja generująca dni roku
function generateCalendar(year) {
const startDate = new Date(year, 0, 1); // 1 stycznia
const endDate = new Date(year, 11, 31); // 31 grudnia
let currentDate = startDate;
// Zmienna do przechowywania kolejności zmian
const shifts = ['work', 'work', 'work', 'rest', 'rest', 'night', 'night'];
let shiftIndex = 0;
while (currentDate <= endDate) {
const dayDiv = document.createElement('div');
dayDiv.classList.add('day');
dayDiv.classList.add(shifts[shiftIndex]); // Dodaj klasę zmiany
dayDiv.innerText = currentDate.toLocaleDateString('pl-PL'); // Wyświetl datę
calendar.appendChild(dayDiv);
// Przejdź do następnego dnia
currentDate.setDate(currentDate.getDate() + 1);
shiftIndex = (shiftIndex + 1) % shifts.length; // Rotacja zmian
}
}
// Wywołaj funkcję dla bieżącego roku
generateCalendar(new Date().getFullYear());
// Pobierz kontener kalendarza const calendar = document.getElementById('calendar'); // Funkcja generująca dni roku function generateCalendar(year) { const startDate = new Date(year, 0, 1); // 1 stycznia const endDate = new Date(year, 11, 31); // 31 grudnia let currentDate = startDate; // Zmienna do przechowywania kolejności zmian const shifts = ['work', 'work', 'work', 'rest', 'rest', 'night', 'night']; let shiftIndex = 0; while (currentDate <= endDate) { const dayDiv = document.createElement('div'); dayDiv.classList.add('day'); dayDiv.classList.add(shifts[shiftIndex]); // Dodaj klasę zmiany dayDiv.innerText = currentDate.toLocaleDateString('pl-PL'); // Wyświetl datę calendar.appendChild(dayDiv); // Przejdź do następnego dnia currentDate.setDate(currentDate.getDate() + 1); shiftIndex = (shiftIndex + 1) % shifts.length; // Rotacja zmian } } // Wywołaj funkcję dla bieżącego roku generateCalendar(new Date().getFullYear());
// Pobierz kontener kalendarza
const calendar = document.getElementById('calendar');

// Funkcja generująca dni roku
function generateCalendar(year) {
    const startDate = new Date(year, 0, 1); // 1 stycznia
    const endDate = new Date(year, 11, 31); // 31 grudnia
    let currentDate = startDate;

    // Zmienna do przechowywania kolejności zmian
    const shifts = ['work', 'work', 'work', 'rest', 'rest', 'night', 'night'];
    let shiftIndex = 0;

    while (currentDate <= endDate) {
        const dayDiv = document.createElement('div');
        dayDiv.classList.add('day');
        dayDiv.classList.add(shifts[shiftIndex]); // Dodaj klasę zmiany
        dayDiv.innerText = currentDate.toLocaleDateString('pl-PL'); // Wyświetl datę

        calendar.appendChild(dayDiv);

        // Przejdź do następnego dnia
        currentDate.setDate(currentDate.getDate() + 1);
        shiftIndex = (shiftIndex + 1) % shifts.length; // Rotacja zmian
    }
}

// Wywołaj funkcję dla bieżącego roku
generateCalendar(new Date().getFullYear());

Co robi ten kod?

  1. Generuje dni roku – Od 1 stycznia do 31 grudnia.
  2. Przydziela zmiany – W pętli przechodzi przez wszystkie dni, dodając odpowiednie klasy CSS (work, rest, night).
  3. Tworzy dynamiczny HTML – Każdy dzień to osobny div, który trafia do naszego kalendarza.

Krok 3: Personalizacja

Możesz łatwo zmodyfikować ten kod, aby dostosować go do swoich potrzeb:

  • Dodaj weekendy – Na przykład dni wolne w soboty i niedziele:javascriptSkopiuj kodif (currentDate.getDay() === 0 || currentDate.getDay() === 6) { dayDiv.classList.add('weekend'); }
  • Kolory zmian – W stylach CSS zmień kolory na bardziej dopasowane do swojej estetyki.

Krok 4: Co dalej?

Masz już podstawowy kalendarz, ale możesz go rozbudować:

  1. Integracja z backendem – Przechowuj zmiany w bazie danych.
  2. Edytowanie zmian – Dodaj możliwość klikania na dzień, by zmienić rodzaj zmiany.
  3. Eksport do PDF – Użyj biblioteki jak jspdf, by generować plik PDF z grafikiem.

Tworzenie kalendarza zmianowego w JavaScript jest nie tylko proste, ale także bardzo praktyczne. Dzięki dynamicznemu podejściu możesz dostosować go do swoich potrzeb i dodać zaawansowane funkcje. Wystarczy trochę wyobraźni i pracy z kodem, by stworzyć coś naprawdę użytecznego.

Szukasz taniego i dobrego hostingu dla swojej strony www? - Sprawdź Seohost.pl