Javascript로 캘린더 플러그인 작성

61155 단어 html plugin css javascript

소개하다.

Javascript를 들었을 때, 우리는 라이브러리와 프레임워크를 자주 들었다.현재 자바스크립트를 어떻게 사용하는지에 관해서는 5백만 가지 선택이 있다.그러나, 우리는 프레임워크나 라이브러리가 필요하지 않고 훌륭한 클래식인 자바스크립트를 사용할 수 있다는 것을 자주 잊어버린다.이 문서에서 일반 자바스크립트를 사용하여 플러그인을 구축할 것입니다.이 플러그인은 HTML 페이지에 달력을 포함할 수 있도록 매우 간단합니다.

건립

HTML 파일, CSS 파일, 자바스크립트 파일 세 개가 필요합니다.자바스크립트 파일부터 시작합시다. 왜냐하면 이것은 우리가 가장 많이 해야 할 일이기 때문입니다.

플러그인 프레임

(function (root, factory) {
  root.myCalendar = factory(root);
})(this, (root) => {
  let privateVar = "No, No, No...";
  let init = () => {
    console.log("Init the calendar");
  };
  return {
    init,
  };
});

우리가 해야 할 첫 번째 일은 우리의 환경을 위해 우리의 플러그인을 제공하는 것이다.우리는 IIFE (즉시 호출되는 함수 표현식) 를 사용하여 이 점을 실현한다.보시다시피, 우리는 첫 번째 함수를 괄호로 묶어서 표현식으로 변환한 다음 바로 호출합니다.
iLife는 패키지된 코드에 유용합니다.내 플러그인 코드는 플러그인 외부에서 접근할 수 없습니다.이따가 볼게요.
위의 코드를 조금 해독해 보겠습니다.
우리의 직능 주체 중에서 우리는 다음과 같이 한다.root.myCalendar = factory(root);뿌리가 뭐예요?이것은 우리 생활의 첫 번째 매개 변수다.따라서 브라우저에서 이 객체는 윈도우 객체입니다.우리는 창문을 열었다.내 달력 도착factory(root).공장, 우리 생명의 두 번째 매개 변수는 함수다.이것은 사실상 우리의 플러그인 내용이다.
이런 방법의 묘미는 창문에 있다.myCalendar에는 함수가 반환하는 내용만 포함됩니다.그래서 윈도우에 전화해도 돼요.내 달력.init()이지만 창이 아닙니다.내 달력.privateVar는 우리의 생명이 되돌아오는 것이 아니기 때문에 정의되지 않을 것입니다.

색인에서 가져옵니다.html

우리는 이미 플러그인이 하나 있다!이것은 아무런 작용이 없지만 매우 쓸모가 있다.HTML 파일을 만들고 테스트해 보겠습니다.

<html>
  <head>
    <script src="simple-calendar.js"></script>
    <script>
      window.onload = function () {
        myCalendar.init();
        console.log(myCalendar.privateVar);
      };
    </script>
  </head>
  <body></body>
</html>

Javascript 파일을 로드합니다.나는 간단한 달력이라고 부른다.js, 하지만 네가 어떻게 말하든지 다 괜찮아.그리고 창을 불러온 후, 온로드 이벤트 탐지기에서, 나는 myCalendar라고 불린다.init()와 콘솔.나의 달력을 기록하다.privateVar 변수.
주의: 창문.내 달력과 내 달력은 여기에서 같다;
콘솔에서 본 내용은 다음과 같습니다.

위대하다init 함수는 우리가 원하는 내용을 출력합니다.privateVar는 실제적으로 정의되지 않았습니다. iLife에서 되돌아오는 것이 아니기 때문에 플러그인은 무슨 말을 하는지 알 수 없습니다.

CSS

우리는 그것을 한쪽에 두자. 왜냐하면 이것은 본문의 중점이 아니기 때문이다.CSS 파일을 만들고 다음 스타일을 배치합니다.

#calendar {
  background: #fff;
  border-radius: 4px;
  color: #222629;
  overflow: hidden;
  margin-top: 20px;
  max-width: 400px;
}

#calendar.hidden {
  display: none;
}

button {
  border: none;
}

#calendar .header {
  background: #ddd;
  height: 40px;
  line-height: 40px;
  text-align: center;
}

#calendar .header + div {
  border: 1px solid black;
}

#calendar .month {
  display: inline-block;
  font-weight: bold;
}

#calendar button {
  background: none;
  color: inherit;
  cursor: pointer;
  font-size: 23px;
  font-weight: bold;
  height: 100%;
  padding: 0 15px;
}

#calendar button:first-child {
  float: left;
}

#calendar button:last-child {
  float: right;
}

#calendar .cell {
  background: #fff;
  color: #5d5d5d;
  box-sizing: border-box;
  display: inline-block;
  padding: 10px 0;
  text-align: center;
  width: calc(100% / 7);
  cursor: pointer;
}

#calendar .cell:hover {
  color: white;
  background-color: blue;
}

#calendar .day {
  font-size: 0.8rem;
  padding: 8px 0;
}

#calendar .cell.today {
  background-color: blue;
  color: white;
}

#calendar .day {
  color: black;
}

HTML 파일에서 가져오는 것을 잊지 마십시오.페이지의 <head>에 다음 행을 추가합니다.<link rel="stylesheet" href="calendar.css" />물론 달력을 바꿉니다.css와 당신의 파일 이름입니다.

기능 추가

좋아, 귀여워. 하지만 내 플러그인은 여기 아무 소용이 없어...시작하자.

몇 개월, 며칠 그리고 오늘
나는 우선 월 명세서, 일수 명세서, 그리고 오늘의 날짜를 받아야 한다.나는 나의 달력이 기본적으로 오늘 날짜에 초점을 맞추기를 바란다.따라서 플러그인에서 개인 변수 위에 다음과 같은 내용을 추가합니다.

// Beginning of the file cut for brevity
    let monthList = new Array(
      "january",
      "february",
      "march",
      "april",
      "may",
      "june",
      "july",
      "august",
      "september",
      "october",
      "november",
      "december"
    );
    let dayList = new Array(
      "sunday",
      "monday",
      "tuesday",
      "wednesday",
      "thursday",
      "friday",
      "saturday"
    );
    let today = new Date();
    today.setHours(0, 0, 0, 0);
    let privateVar = "No, No, No...";

  let init = () => {
    console.log("Init the calendar");
  };
  return {
    init,
  };
});

좋아, 모든 것이 다 준비됐어.이제 우리는 DOM을 수정해서 우리의 달력을 실현할 수 있다.분명히 이 단계는 init 함수 내부에서 완성해야 한다.우리는 플러그인을 초기화할 때 달력을 표시하기를 희망합니다.
우리는 몇 가지 일을 해야 한다.

현재 월과 현재 연도의 이름을 포함하는 제목을 만듭니다.이 제목에는 월 간 탐색을 위한 다음 단추와 이전 단추도 있습니다.

제목 아래에 일요일부터 월요일까지의 일수를 나열합니다.

마지막으로 우리는 이달의 일수를 가질 것이다.

헤딩

// Our variables are up there
let init = () => {
  let element = document.getElementById("calendar");

  let currentMonth = new Date(today.getFullYear(), today.getMonth(), 1);

  // Creating the div for our calendar's header
  let header = document.createElement("div");
  header.classList.add("header");
  element.appendChild(header);

  // Our "previous" button
  let previousButton = document.createElement("button");
  previousButton.setAttribute("data-action", "-1");
  previousButton.textContent = "\u003c";
  header.appendChild(previousButton);

  // Creating the div that will contain the actual month/year
  let monthDiv = document.createElement("div");
  monthDiv.classList.add("month");
  header.appendChild(monthDiv);

  // Our "next" button
  let nextButton = document.createElement("button");
  nextButton.setAttribute("data-action", "1");
  nextButton.textContent = "\u003e";
  header.appendChild(nextButton);
};

여기에 몇 개의 자바스크립트 요소만 추가되었습니다.우리는 어떤 화려한 것도 사용하지 않고,create Element, append Child, set Attribute가 있는 클래식 자바스크립트 API만 사용합니다.제목을 위한div 요소를 만들었습니다. 현재 달의 이름을 포함합니다.우리는 또한 이전과 다음 단추를 만들었다.
이 줄에 주의하십시오:let element = document.getElementById("calendar");이 요소는 우리의 달력을 포함할 것이다.우리는 그것을 id가calendar인 원소에 넣었다.이것은 내가 한 선택이지만, 우리는 이후에 맞춤형 제작을 진행할 것이다.그러나 이것은 HTML에 정확한 id를 가진 요소를 추가해야 한다는 것을 의미합니다.

<!-- The <head> tag is up there-->
<body>
  <div id="calendar"></div>
</body>

HTML은 이렇습니다.과연 우리는 페이지에서 제목을 볼 수 있다.

계속합시다!

일수 및 월 셀 목록 추가

현재 월의 일수를 포함하는 칸을 추가합니다.우리가 조심해야 할 일이 하나 있다. 월초의 하늘.우리의 일주일은 일요일부터 시작하지만, 만약 우리의 한 달이 수요일부터 시작한다면, 우리는 빈 칸을 채워야 한다.
똑똑히 보기 위해서, 나는 이 논리를 자신의 방법에 놓을 것이다.

// This is inside the init function, right before the end of the function

 // Creating the div that will contain the days of our calendar
    let content = document.createElement("div");
    element.appendChild(content);

    // Load current month
    // monthDiv is the element in the header that will contain the month's name
    // content is the element that will contain our days' cells
    // We created those variables earlier in the function
    loadMonth(currentMonth, content, monthDiv);
    } // <- this is the end of the init function

  let loadMonth = (date, content, monthDiv) => {
    // Empty the calendar
    content.textContent = "";

    // Adding the month/year displayed
    monthDiv.textContent =
      monthList[date.getMonth()].toUpperCase() + " " + date.getFullYear();

    // Creating the cells containing the days of the week
    // I've created a separate method for this
    createDaysNamesCells(content);

    // Creating empty cells if necessary
    createEmptyCellsIfNecessary(content, date);


    // Number of days in the current month
    let monthLength = new Date(
      date.getFullYear(),
      date.getMonth() + 1,
      0
    ).getDate();

    // Creating the cells containing current's month's days
    for (let i = 1; i <= monthLength; i++) {
      let cell = document.createElement("span");
      cell.classList.add("cell");
      cell.textContent = `${i}`;
      content.appendChild(cell);

      // Cell's timestamp
      let timestamp = new Date(
        date.getFullYear(),
        date.getMonth(),
        i
      ).getTime();
      cell.addEventListener("click", () => {
        console.log(timestamp);
        console.log(new Date(timestamp))
      });

      // Add a special class for today
      if (timestamp === today.getTime()) {
        cell.classList.add("today");
      }
    }
  }

  let createDaysNamesCells = (content) => {
    for (let i = 0; i < dayList.length; i++) {
      let cell = document.createElement("span");
      cell.classList.add("cell");
      cell.classList.add("day");
      cell.textContent = dayList[i].substring(0, 3).toUpperCase();
      content.appendChild(cell);
    }
  };

  let createEmptyCellsIfNecessary = content => {
    for (let i = 0; i < date.getDay(); i++) {
      let cell = document.createElement("span");
      cell.classList.add("cell");
      cell.classList.add("empty");
      content.appendChild(cell);
    }
  }

  // The rest of the plugin down here, cut for brevity

이곳에 많은 일이 일어났다!

우리는 처음으로loadMonth에게 전화를 걸었다.이 기능은 제목에 현재 달과 현재 연도의 이름을 표시합니다.

그리고 일요일부터 토요일까지의 일수 목록을 표시하기 위해CreateDaysNameCells를 호출합니다.

필요하면 CreateEmptyCellsIf를 호출하여 빈 칸을 표시합니다.우리는 이 함수에 날짜 변수를 하나 주었는데, 그것은 현재 달의 첫날이다.이 변수에 getDay () 를 호출하면 그날의 색인을 얻을 수 있습니다.일요일부터 우리 달력의 일주일처럼 우리가 필요로 하는 빈 칸의 수를 간단하게 순환할 수 있기 때문이다.

마지막으로 우리는 이 달의 일수를 받고 각 칸에 정확한 날짜를 표시한다.콘솔에 시간 스탬프와 선택한 날짜를 인쇄하기 위해 모든 칸에 이벤트 탐지기를 추가했습니다.또한 이날을 위해 CSS로 디자인된 클래스를 추가했습니다.

이게 지금까지의 결과야!

달력이 정확하게 보여집니다. 날짜를 눌렀을 때, 컨트롤러에서 시간 스탬프와 눌렀던 칸의 날짜를 볼 수 있습니다.

상호 작용 증가

우리는 세 가지를 보충해야 한다.

날짜를 눌렀을 때 선택한 날짜가 됩니다.

내가 이전 단추를 눌렀을 때 우리는 지난달에 들어갔다.

내가 다음 단추를 눌렀을 때 우리는 다음 달로 들어간다.

첫 번째 항목에 대해, 우리는 오늘의 클래스를 정확한 칸에 추가해야 한다.today 클래스를 이전에 선택한 칸에 삭제해야 합니다.오늘은 내가 선택한 반의 명칭이지만, 너는 마음대로 그것을 불러도 된다.너는 너의 코드를 적당히 업데이트하기만 하면 된다.콘솔에서 타임스탬프와 날짜를 인쇄할 위치로 이동하여 코드를 다음과 같이 변경합니다.

cell.addEventListener("click", () => {
  console.log(timestamp);
  console.log(new Date(timestamp));
  document.querySelector(".cell.today")?.classList.remove("today");
  cell.classList.add("today");
});

이렇게 하면 선택한 셀의 스타일이 올바르게 설정됩니다.
마지막으로 다음 달/마지막 달의 기능을 추가합니다.

//Inside the init function

// Next/previous button functionality
element.querySelectorAll("button").forEach((element) => {
  element.addEventListener("click", () => {
    currentMonth.setMonth(
      currentMonth.getMonth() * 1 +
        parseInt(element.getAttribute("data-action")) * 1
    );
    loadMonth(currentMonth, content, monthDiv);
  });
});

우리는 모든 단추에 사건 탐지기를 추가합니다.우리가 만든 '데이터 조작' 속성을 사용하여 '다음' 단추를 눌렀는지 '이전' 단추를 눌렀는지 확인할 것입니다.데이터 조작은 1 또는 -1과 같다.우리는currentMonth 변수를 수정하고loadMonth를 다시 호출합니다. 왜냐하면 우리는 달력의 내용을 업데이트해야 하기 때문입니다.
그리고 효과가 있어요!
축하합니다. 방금 자바스크립트 플러그인을 만들었습니다.
다음은 전체 Javascript 코드입니다.

(function (root, factory) {
  root.myCalendar = factory(root);
})(this, (root) => {
  let monthList = new Array(
    "january",
    "february",
    "march",
    "april",
    "may",
    "june",
    "july",
    "august",
    "september",
    "october",
    "november",
    "december"
  );
  let dayList = new Array(
    "sunday",
    "monday",
    "tuesday",
    "wednesday",
    "thursday",
    "friday",
    "saturday"
  );
  let today = new Date();
  today.setHours(0, 0, 0, 0);
  let privateVar = "No, No, No...";

  let init = () => {
    let element = document.getElementById("calendar");

    let currentMonth = new Date(today.getFullYear(), today.getMonth(), 1);

    // Creating the div for our calendar's header
    let header = document.createElement("div");
    header.classList.add("header");
    element.appendChild(header);

    // Creating the div that will contain the days of our calendar
    let content = document.createElement("div");
    element.appendChild(content);

    // Our "previous" button
    let previousButton = document.createElement("button");
    previousButton.setAttribute("data-action", "-1");
    previousButton.textContent = "\u003c";
    header.appendChild(previousButton);

    // Creating the div that will contain the actual month/year
    let monthDiv = document.createElement("div");
    monthDiv.classList.add("month");
    header.appendChild(monthDiv);

    // Our "next" button
    let nextButton = document.createElement("button");
    nextButton.setAttribute("data-action", "1");
    nextButton.textContent = "\u003e";
    header.appendChild(nextButton);

    // Next/previous button functionality
    element.querySelectorAll("button").forEach((element) => {
      element.addEventListener("click", () => {
        console.log(element.getAttribute("data-action"));
        currentMonth.setMonth(
          currentMonth.getMonth() * 1 +
            parseInt(element.getAttribute("data-action")) * 1
        );
        loadMonth(currentMonth, content, monthDiv);
      });
    });

    // Load current month
    loadMonth(currentMonth, content, monthDiv);
  };

  let createDaysNamesCells = (content) => {
    for (let i = 0; i < dayList.length; i++) {
      let cell = document.createElement("span");
      cell.classList.add("cell");
      cell.classList.add("day");
      cell.textContent = dayList[i].substring(0, 3).toUpperCase();
      content.appendChild(cell);
    }
  };

  let createEmptyCellsIfNecessary = (content, date) => {
    for (let i = 0; i < date.getDay(); i++) {
      let cell = document.createElement("span");
      cell.classList.add("cell");
      cell.classList.add("empty");
      content.appendChild(cell);
    }
  };

  let loadMonth = (date, content, monthDiv) => {
    // Empty the calendar
    content.textContent = "";

    // Adding the month/year displayed
    monthDiv.textContent =
      monthList[date.getMonth()].toUpperCase() + " " + date.getFullYear();

    // Creating the cells containing the days of the week
    createDaysNamesCells(content);

    // Creating empty cells if necessary
    createEmptyCellsIfNecessary(content, date);

    // Number of days in the current month
    let monthLength = new Date(
      date.getFullYear(),
      date.getMonth() + 1,
      0
    ).getDate();

    // Creating the cells containing current's month's days
    for (let i = 1; i <= monthLength; i++) {
      let cell = document.createElement("span");
      cell.classList.add("cell");
      cell.textContent = `${i}`;
      content.appendChild(cell);

      // Cell's timestamp
      let timestamp = new Date(
        date.getFullYear(),
        date.getMonth(),
        i
      ).getTime();
      cell.addEventListener("click", () => {
        console.log(timestamp);
        console.log(new Date(timestamp));

        document.querySelector(".cell.today")?.classList.remove("today");
        cell.classList.add("today");
      });

      // Add a special class for today
      if (timestamp === today.getTime()) {
        cell.classList.add("today");
      }
    }
  };
  return {
    init,
  };
});

즐겁게 놀다❤️

Reference

이 문제에 관하여(Javascript로 캘린더 플러그인 작성), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/damcosset/write-a-calendar-plugin-with-javascript-kk3

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

Synchronized 구현 원리

[Unity 노트] 카메라 따라가는 거.

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다