css js 日历

CSS和JS日历是非常实用的工具，无论是网站还是应用程序都可以用它们来提升用户体验。

CSS日历可以通过使用CSS样式制作页面上的日历，与用户交互可以使用JavaScript来实现，可以实现日历在不同设备和尺寸上的适应性。 例如，可以设置元素以响应页面大小的变化。

.calendar {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
}

.calendar__days {
  width: calc(100% / 7);
  text-align: center;
  padding: 15px;
  box-sizing: border-box;
}

.calendar__day--today {
  font-weight: bold;
  color: #009688;
}

JS日历可以响应用户的交互，例如当用户选择日期时，JavaScript将返回相关数据。这可以用于预订，工作日历，事件日历等。可以使用库来简化开发过程，例如FullCalendar，Momment.js，DatePicker等。

$( document ).ready(function() {
  $('#calendar').fullCalendar({
    events: [
      {
        title: 'Event 1',
        start: '2021-12-01'
      },
      {
        title: 'Event 2',
        start: '2021-12-05',
        end: '2021-12-07'
      },
      {
        title: 'Event 3',
        start: '2021-12-09T12:30:00',
        allDay: false 
      }
    ]
  });
});

综上所述，CSS和JS日历都是很方便的工具，可以帮助我们更好的展示日期和事件，提高用户交互性，增加网站和应用程序的价值。