CSS之日历组件

效果演示

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

Code

<section class='calendar'>
    <h1>August 2023</h1>
    <form action='#'>
        <label class='weekday'>Mo</label>
        <label class='weekday'>Tu</label>
        <label class='weekday'>We</label>
        <label class='weekday'>Th</label>
        <label class='weekday'>Fr</label>
        <label class='weekday'>Sa</label>
        <label class='weekday'>Su</label>
        <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>-4</span>
            <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>-3</span>
            <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>-2</span>
            <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>-1</span>
            <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>0</span>
            <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>1</span>
            <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>2</span>
            <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>3</span>
            <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>4</span>
            <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>5</span>
            <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>6</span>
            <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>7</span>
            <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>8</span>
            <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>9</span>
            <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>10</span>
            <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>11</span>
            <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>12</span>
            <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>13</span>
            <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>14</span>
            <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>15</span>
            <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>16</span>
            <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>17</span>
            <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>18</span>
            <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>19</span>
            <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>20</span>
            <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>21</span>
            <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>22</span>
            <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>23</span>
            <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>24</span>
            <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>25</span>
            <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>26</span>
            <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>27</span>
            <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>28</span>
            <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>29</span>
            <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>30</span>
            <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>31</span>
            <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; /*