Javascript 尝试使用JQuery编写的日历创建一个简单的时间选择器

我是jQuery新手，但我成功地构建了一个日历，该日历将在2020年更新，并在单击每个数字时更改颜色。最后一点是为一周中的每一天添加时间段，这样你就可以点击某个时间进行预约。只有使用jQuery、html和css，有没有一种简单的方法可以做到这一点？这是一个学校项目，所以它只需要客户端。我对服务器端语言知之甚少

谢谢大家!

代码如下：

$（文档）.ready（函数（）{
var currentDate=新日期（）；
函数generateCalendar（d）{
功能月日（月、年）{
var结果=[]；
var days=新日期（年、月、0）.getDate（）；
对于（var i=1；i详细信息。总天数）{
cal[i]。推送（“”）；
}否则{
如果（i==1&&j
/*以下代码是某种“重置”。“长方体大小”属性可以使
构建CSS布局更简单、更直观。
*/
html{
框大小：边框框；
}
/*下面的样式和布局*/
h1{
字体大小：22px；
字体系列：“Lato”；
字体大小：正常；
文本对齐：居中；
}
琼伯伦先生{
背景：白色；
高度：50px；
}
法兰西{
字体大小：0.5em；
}
桌子{
宽度：100%；
}
th{
文本对齐：居中；
}
运输署{
高度：25px；
文本对齐：居中；
线高：25px！重要；
字体大小：14px！重要；
}
td，#年{
字体系列：“Lato”；
字体大小：22px；
}
td，#月{
字体系列：“Lato”；
字体大小：22px；
}
.悬停{
背景：#eeeeee；
}
a{
文字装饰：无；
}
.下拉菜单{
字体系列：“proxima nova”，Helvetica，Arial，无衬线；
文本转换：无；
背景色：#081826；
颜色：#ffffff；
边界半径：10px；
左边距：-90px；
右边距：0px；
边际上限：0px；
边缘底部：0px；
填充顶部：20px；
垫底：20px；
左侧填充：20px；
右边填充：20px；
边界：50px；
}
.下拉式容器{
位置：相对位置；
}
.导航项目{
颜色：#ffffff；
}
.ek nav{
背景色：#081826；
}
.左箭头{
颜色：#ffffff；
}
.导航杆切换器{
颜色：白色；
边界：无；
}
a.navbar品牌{
字体大小：22px；
字体大小：粗体；
字体系列：“Lato”；
文本对齐：居中；
}
.nav链路i{
右边填充：10px；
}
li.导航项目{
字体大小：22px；
字体系列：“Lato”；
字体大小：正常；
}
李：个人资料{
背景色：白色；
颜色：灰色；
填充：20px；
边界半径：100px；
边缘底部：10px；
左边距：25px；
字体大小：40px；
}

杰夫健康伙伴




艾琳·金












对不起，我不明白“时间段”的含义，请解释一下好吗？一周中的每一天，我都需要预约时间段。所以，当你在日历上点击你想要的日期时，时间就会显示出来，这样你就可以选择约会时间了。对不起，我不明白“时间段”的含义。你能解释一下吗？一周中的每一天，我都需要约会时间段。因此，当您在日历上单击所需的日期时，将显示时间，以便您可以选择约会时间。