13 日历组件

效果演示

实现了一个日历功能，用户可以通过选择日期来添加日程。日历包括一个头部标题、一个表单和一个日历表格。用户可以通过选择日期来添加日程，选择日期后会在日历表格中显示对应的日期。用户还可以在表单中输入日程信息，并将其添加到日历表格中。日历表格包括每个日期的数字，以及每个日期下方的日程信息。用户可以通过选择日期来查看和编辑日程信息。

Code

<section class='calendar'>
    <h1>August 2023h1>
    <form action='#'>
        <label class='weekday'>Molabel>
        <label class='weekday'>Tulabel>
        <label class='weekday'>Welabel>
        <label class='weekday'>Thlabel>
        <label class='weekday'>Frlabel>
        <label class='weekday'>Salabel>
        <label class='weekday'>Sulabel>
        <label class='day invalid' data-day='0'>
            <input class='appointment' date-day='-4' placeholder='What would you like to do?' required='true'
                type='text'>
            <span>-4span>
            <em>em>
        label>
        <label class='day invalid' data-day='1'>
            <input class='appointment' date-day='-3' placeholder='What would you like to do?' required='true'
                type='text'>
            <span>-3span>
            <em>em>
        label>

        
        <label class='day invalid' data-day='2'>
            <input class='appointment' date-day='-2' placeholder='What would you like to do?' required='true'
                type='text'>
            <span>-2span>
            <em>em>
        label>
        <label class='day invalid' data-day='3'>
            <input class='appointment' date-day='-1' placeholder='What would you like to do?' required='true'
                type='text'>
            <span>-1span>
            <em>em>
        label>
        <label class='day invalid' data-day='4'>
            <input class='appointment' date-day='0' placeholder='What would you like to do?' required='true'
                type='text'>
            <span>0span>
            <em>em>
        label>
        <label class='day' data-day='5'>
            <input class='appointment' date-day='1' placeholder='What would you like to do?' required='true'
                type='text'>
            <span>1span>
            <em>em>
        label>
        <label class='day' data-day='6'>
            <input class='appointment' date-day='2' placeholder='What would you like to do?' required='true'
                type='text'>
            <span>2span>
            <em>em>
        label>
        <label class='day' data-day='7'>
            <input class='appointment' date-day='3' placeholder='What would you like to do?' required='true'
                type='text'>
            <span>3span>
            <em>em>
        label>
        <label class='day' data-day='8'>
            <input class='appointment' date-day='4' placeholder='What would you like to do?' required='true'
                type='text'>
            <span>4span>
            <em>em>
        label>
        <label class='day' data-day='9'>
            <input class='appointment' date-day='5' placeholder='What would you like to do?' required='true'
                type='text'>
            <span>5span>
            <em>em>
        label>
        <label class='day' data-day='10'>
            <input class='appointment' date-day='6' placeholder='What would you like to do?' required='true'
                type='text'>
            <span>6span>
            <em>em>
        label>
        <label class='day' data-day='11'>
            <input class='appointment' date-day='7' placeholder='What would you like to do?' required='true'
                type='text'>
            <span>7span>
            <em>em>
        label>
        <label class='day' data-day='12'>
            <input class='appointment' date-day='8' placeholder='What would you like to do?' required='true'
                type='text'>
            <span>8span>
            <em>em>
        label>
        <label class='day' data-day='13'>
            <input class='appointment' date-day='9' placeholder='What would you like to do?' required='true'
                type='text'>
            <span>9span>
            <em>em>
        label>
        <label class='day' data-day='14'>
            <input class='appointment' date-day='10' placeholder='What would you like to do?' required='true'
                type='text'>
            <span>10span>
            <em>em>
        label>
        <label class='day' data-day='15'>
            <input class='appointment' date-day='11' placeholder='What would you like to do?' required='true'
                type='text'>
            <span>11span>
            <em>em>
        label>
        <label class='day' data-day='16'>
            <input class='appointment' date-day='12' placeholder='What would you like to do?' required='true'
                type='text'>
            <span>12span>
            <em>em>
        label>
        <label class='day' data-day='17'>
            <input class='appointment' date-day='13' placeholder='What would you like to do?' required='true'
                type='text'>
            <span>13span>
            <em>em>
        label>
        <label class='day' data-day='18'>
            <input class='appointment' date-day='14' placeholder='What would you like to do?' required='true'
                type='text'>
            <span>14span>
            <em>em>
        label>
        <label class='day' data-day='19'>
            <input class='appointment' date-day='15' placeholder='What would you like to do?' required='true'
                type='text'>
            <span>15span>
            <em>em>
        label>
        <label class='day' data-day='20'>
            <input class='appointment' date-day='16' placeholder='What would you like to do?' required='true'
                type='text'>
            <span>16span>
            <em>em>
        label>
        <label class='day' data-day='21'>
            <input class='appointment' date-day='17' placeholder='What would you like to do?' required='true'
                type='text'>
            <span>17span>
            <em>em>
        label>
        <label class='day' data-day='22'>
            <input class='appointment' date-day='18' placeholder='What would you like to do?' required='true'
                type='text'>
            <span>18span>
            <em>em>
        label>
        <label class='day' data-day='23'>
            <input class='appointment' date-day='19' placeholder='What would you like to do?' required='true'
                type='text'>
            <span>19span>
            <em>em>
        label>
        <label class='day' data-day='24'>
            <input class='appointment' date-day='20' placeholder='What would you like to do?' required='true'
                type='text'>
            <span>20span>
            <em>em>
        label>
        <label class='day' data-day='25'>
            <input class='appointment' date-day='21' placeholder='What would you like to do?' required='true'
                type='text'>
            <span>21span>
            <em>em>
        label>
        <label class='day' data-day='26'>
            <input class='appointment' date-day='22' placeholder='What would you like to do?' required='true'
                type='text'>
            <span>22span>
            <em>em>
        label>
        <label class='day' data-day='27'>
            <input class='appointment' date-day='23' placeholder='What would you like to do?' required='true'
                type='text'>
            <span>23span>
            <em>em>
        label>
        <label class='day' data-day='28'>
            <input class='appointment' date-day='24' placeholder='What would you like to do?' required='true'
                type='text'>
            <span>24span>
            <em>em>
        label>
        <label class='day' data-day='29'>
            <input class='appointment' date-day='25' placeholder='What would you like to do?' required='true'
                type='text'>
            <span>25span>
            <em>em>
        label>
        <label class='day' data-day='30'>
            <input class='appointment' date-day='26' placeholder='What would you like to do?' required='true'
                type='text'>
            <span>26span>
            <em>em>
        label>
        <label class='day' data-day='31'>
            <input class='appointment' date-day='27' placeholder='What would you like to do?' required='true'
                type='text'>
            <span>27span>
            <em>em>
        label>
        <label class='day' data-day='32'>
            <input class='appointment' date-day='28' placeholder='What would you like to do?' required='true'
                type='text'>
            <span>28span>
            <em>em>
        label>
        <label class='day' data-day='33'>
            <input class='appointment' date-day='29' placeholder='What would you like to do?' required='true'
                type='text'>
            <span>29span>
            <em>em>
        label>
        <label class='day' data-day='34'>
            <input class='appointment' date-day='30' placeholder='What would you like to do?' required='true'
                type='text'>
            <span>30span>
            <em>em>
        label>
        <label class='day' data-day='35'>
            <input class='appointment' date-day='31' placeholder='What would you like to do?' required='true'
                type='text'>
            <span>31span>
            <em>em>
        label>
        <div class='clearfix'>div>
    form>
section>

html {
    position: relative; /* 设置元素的定位方式为相对定位 */
    position: absolute; /* 覆盖前面的定位方式，设置元素的定位方式为绝对定位 */
    width: 100%; /* 设置元素的宽度为父容器的100% */
    height: 100%; /* 设置元素的高度为父容器的100% */
    left: 0; /* 设置元素相对于父容器左边缘的偏移量为0 */
    top: 0; /* 设置元素相对于父容器上边缘的偏移量为0 */
    right: 0; /* 设置元素相对于父容器右边缘的偏移量为0 */
    bottom: 0; /* 设置元素相对于父容器下边缘的偏移量为0 */
}

body {
    background-color: #e8e8e8; /* 设置 body 元素的背景颜色为 #e8e8e8 */
}

section.calendar {
    background-color: #29323f; /* 设置具有 .calendar 类的 section 元素的背景颜色为 #29323f */
    font-family: "Dosis", sans-serif; /* 设置 section 元素的字体为 "Dosis" */
    color: #fff; /* 设置 section 元素的文本颜色为白色 */
    width: 290px; /* 设置 section 元素的宽度为 290px */
    padding: 45px; /* 设置 section 元素的内边距为 45px */
    position: absolute; /* 设置 section 元素的定位方式为绝对定位 */
    top: 50%; /* 设置 section 元素相对于父容器上边缘的偏移量为50% */
    left: 50%; /* 设置 section 元素相对于父容器左边缘的偏移量为50% */
    transform: translateY(-50%) translateX(-50%); /* 使用 transform 属性将元素在垂直和水平方向上居中 */
    box-shadow: 5px 10px 20px rgba(0, 0, 0, 0.6); /* 设置 section 元素的阴影效果 */
    border-radius: 5px; /* 设置 section 元素的边框圆角为5px */
}

section.calendar h1 {
    text-align: center; /* 设置 h1 元素的文本居中对齐 */
    color: cadetblue; /* 设置 h1 元素的文本颜色为 cadetblue */
    margin: 0 0 30px 0; /* 设置 h1 元素的外边距，分别为上、右、下、左，此处为 0 上边距、0 右边距、30px 下边距、0 左边距 */
}

section.calendar form {
    position: relative; /* 设置 form 元素的定位方式为相对定位 */
    display: flex; /* 设置 form 元素为弹性布局 */
    flex-direction: row; /* 设置 flex 元素的主轴方向为水平方向 */
    flex-wrap: wrap; /* 设置 flex 元素的换行方式为自动换行 */
    align-items: flex-start; /* 设置 flex 元素在交叉轴上的对齐方式为起始对齐 */
    align-content: flex-start; /* 设置 flex 元素在交叉轴上的内容对齐方式为起始对齐 */
}

section.calendar form label.weekday {
    display: inline-block; /* 设置 label.weekday 元素为内联块元素 */
    width: 25px; /* 设置 label.weekday 元素的宽度为 25px */
    margin: 8px; /* 设置 label.weekday 元素的外边距为 8px */
    text-align: center; /* 设置 label.weekday 元素的文本居中对齐 */
    color: #999; /* 设置 label.weekday 元素的文本颜色为 #999 */
}

section.calendar form form {
    margin: 0; /* 设置 form 元素的外边距为 0 */
    padding: 0; /* 设置 form 元素的内边距为 0 */
}

section.calendar form label.day {
    display: inline-block; /* 设置 label.day 元素为内联块元素 */
    width: 25px; /* 设置 label.day 元素的宽度为 25px */
    margin: 8px; /* 设置 label.day 元素的外边距为 8px */
}

section.calendar form label.day span {
    display: inline-block; /* 设置 label.day span 元素为内联块元素 */
    width: 25px; /* 设置 label.day span 元素的宽度为 25px */
    height: 25px; /* 设置 label.day span 元素的高度为 25px */
    line-height: 25px; /* 设置 label.day span 元素的行高为 25px */
    margin: -2px 0 0 -2px; /* 设置 label.day span 元素的外边距，分别为上、右、下、左，此处为 -2px 上边距、0 右边距、0 下边距、-2px 左边距 */
    border-radius: 50%; /* 设置 label.day span 元素的边框圆角为 50% */
    border: 2px solid #29323f; /* 设置 label.day span 元素的边框样式为 2px 实线，颜色为 #29323f */
    text-align: center; /* 设置 label.day span 元素的文本居中对齐 */
    transition: all 0.2s linear; /* 设置 label.day span 元素的过渡效果，时长为 0.2s，缓动函数为线性 */
    cursor: pointer; /* 设置 label.day span 元素的鼠标样式为指针 */
}

section.calendar form label.day span:hover {
    border-color: cadetblue; /* 设置 label.day span 元素在鼠标悬停时的边框颜色为 cadetblue */
}

section.calendar form label.day em {
    display: inline-block; /* 设置 label.day em 元素为内联块元素 */
    position: absolute; /* 设置 label.day em 元素的定位方式为绝对定位 */
    border-radius: 50%; /* 设置 label.day em 元素的边框圆角为 50% */
    border-color: #29323f; /* 设置 label.day em 元素的边框颜色为 #29323f */
    width: 3px; /* 设置 label.day em 元素的宽度为 3px */
    height: 3px; /* 设置 label.day em 元素的高度为 3px */
    background-color: #685e02; /* 设置 label.day em 元素的背景颜色为 #685e02 */
    margin-left: 11px; /* 设置 label.day em 元素的左外边距为 11px */
    margin-top: 2px; /* 设置 label.day em 元素的上外边距为 2px */
    opacity: 0; /* 设置 label.day em 元素的透明度为 0 */
    transition: all 0.2s linear; /* 设置 label.day em 元素的过渡效果，时长为 0.2s，缓动函数为线性 */
}

section.calendar form label.day input[type=text] {
    border: 0; /* 设置 label.day input[type=text] 元素的边框为 0 */
    opacity: 0; /* 设置 label.day input[type=text] 元素的透明度为 0 */
    position: absolute; /* 设置 label.day input[type=text] 元素的定位方式为绝对定位 */
    margin-top: 40px; /* 设置 label.day input[type=text] 元素相对于父元素顶部的偏移量为 40px */
    left: -45px; /* 设置 label.day input[type=text] 元素相对于父元素左侧的偏移量为 -45px */
    width: 380px; /* 设置 label.day input[type=text] 元素的宽度为 380px */
    height: 1px; /* 设置 label.day input[type=text] 元素的高度为 1px */
    padding: 0; /* 设置 label.day input[type=text] 元素的内边距为 0 */
    outline: none; /* 设置 label.day input[type=text] 元素的轮廓样式为无 */
    font-size: 16px; /* 设置 label.day input[type=text] 元素的字体大小为 16px */
    transition: height 0.2s linear, opacity 0.2s linear, color 0.02s linear; /* 设置 label.day input[type=text] 元素的过渡效果，包括高度、透明度和颜色的过渡效果 */
    color: #fff; /* 设置 label.day input[type=text] 元素的文本颜色为白色 */
}

section.calendar form label.day input[type=text]:focus {
    opacity: 1; /* 设置 label.day input[type=text] 元素的透明度为 1 */
    height: 35px; /* 设置 label.day input[type=text] 元素的高度为 35px */
    padding: 10px 40px; /* 设置 label.day input[type=text] 元素的内边距，分别为上下 10px，左右 40px */
    left: -45px; /* 设置 label.day input[type=text] 元素相对于父元素左侧的偏移量为 -45px */
    width: 300px; /* 设置 label.day input[type=text] 元素的宽度为 300px */
    color: #29323f; /* 设置 label.day input[type=text] 元素的文本颜色为 #29323f */
}

section.calendar form label.day input[type=text]:focus+span {
    color: cadetblue; /* 设置 label.day input[type=text] 元素的相邻兄弟元素 span 的文本颜色为 cadetblue */
    border-color: cadetblue; /* 设置 label.day input[type=text] 元素的相邻兄弟元素 span 的边框颜色为 cadetblue */
    background: cadetblue; /* 设置 label.day input[type=text] 元素的相邻兄弟元素 span 的背景颜色为 cadetblue */
    color: #29323f; /* 设置 label.day input[type=text] 元素的相邻兄弟元素 span 的文本颜色为 #29323f */
    font-weight: bold; /* 设置 label.day input[type=text] 元素的相邻兄弟元素 span 的字体粗细为粗体 */
    margin-bottom: 65px; /* 设置 label.day input[type=text] 元素的相邻兄弟元素 span 的下外边距为 65px */
}

section.calendar form label.day input[type=text]:focus~em {
    border-radius: 0; /* 设置 label.day input[type=text] 元素的后续兄弟元素 em 的边框圆角为 0 */
    border: 5px solid transparent; /* 设置 label.day input[type=text] 元素的后续兄弟元素 em 的边框样式为 5px 透明实线 */
    background: transparent; /* 设置 label.day input[type=text] 元素的后续兄弟元素 em 的背景颜色为透明 */
    border-bottom-color: white; /* 设置 label.day input[type=text] 元素的后续兄弟元素 em 的下边框颜色为白色 */
    margin-top: -62px; /* 设置 label.day input[type=text] 元素的后续兄弟元素 em 的上外边距为 -62px */
    margin-left: 7px; /* 设置 label.day input[type=text] 元素的后续兄弟元素 em 的左外边距为 7px */
    width: 0; /* 设置 label.day input[type=text] 元素的后续兄弟元素 em 的宽度为 0 */
    height: 0; /* 设置 label.day input[type=text] 元素的后续兄弟元素 em 的高度为 0 */
    display: inline-block; /* 设置 label.day input[type=text] 元素的后续兄弟元素 em 的显示方式为内联块元素 */
    opacity: 1; /* 设置 label.day input[type=text] 元素的后续兄弟元素 em 的透明度为 1 */
}

section.calendar form label.day input[type=text]:valid~em {
    display: inline-block; /* 设置 label.day input[type=text] 元素的后续兄弟元素 em 的显示方式为内联块元素 */
    opacity: 1; /* 设置 label.day input[type=text] 元素的后续兄弟元素 em 的透明度为 1 */
}

section.calendar form label.day.invalid {
    opacity: 0; /* 设置 label.day.invalid 元素的透明度为 0 */
    width: 25px; /* 设置 label.day.invalid 元素的宽度为 25px */
    height: 25px; /* 设置 label.day.invalid 元素的高度为 25px */
}

section.calendar form label.day.invalid span,
section.calendar form label.day.invalid input {
    display: none; /* 设置 label.day.invalid 元素的相邻兄弟元素 span 和 input 的显示方式为隐藏 */
}

section.calendar div.clearfix {
    clear: both; /* 清除浮动 */
}

section.calendar div.hidden {
    display: none; /*