超大日历扩展器

Posted 2023-03-27

【中文标题】超大日历扩展器

【英文标题】：supersize calendarextender

【发布时间】：2011-04-24 22:40:15

【问题描述】：

如何调整 ajax 控件工具包的 calendarextender 的大小以使其更易于触摸.

这是我目前使用的 css：

.ajax__calendar_container padding:4px;position:absolute;cursor:default;width:450px;font-size:28px;text-align:center;font-family:tahoma,verdana,helvetica; z 指数：10000； .ajax__calendar_body height:360px;width:450px;position:relative;overflow:hidden;margin:auto; .ajax__calendar_days top:0px;left:0px;height:360px;width:450px;position:absolute;text-align:center;margin:auto;可见性：可见； .ajax__calendar_monthstop:0px;left:0px;width:450px;position:absolute;text-align:center;margin: 0 0 -5px 0;填充：0 0 1px 0；溢出：隐藏；背景颜色：#ffffff； .ajax__calendar_years top:0px;left:0px;width:450px;position:absolute;text-align:center;margin:-10px;overflow:hidden;

.ajax__calendar_container TABLE font-size:32px; .ajax__calendar_header 高度：40px；宽度：100%； z-index: 1000; .ajax__calendar_prev cursor:pointer;width:45px;height:45px;float:left;background-repeat:no-repeat;background-position:50% 50%;background-image:url();背景颜色：#D3DEEF; .ajax__calendar_next cursor:pointer;width:45px;height:45px;float:right;background-repeat:no-repeat;background-position:50% 50%;background-image:url();背景颜色：#D3DEEF; .ajax__calendar_title 光标：指针；字体粗体：粗体； .ajax__calendar_footer 高度：33px; .ajax__calendar_today cursor:pointer;padding-top:3px; .ajax__calendar_dayname height:28px;width:34px;text-align:right;padding:0 4px -10px 0; .ajax__calendar_day font-size:20px;height:51px;width:54px;text-align:right;padding:0 4px;cursor:pointer; .ajax__calendar_month font-size:18px;height:45px;width:60px;text-align:center;cursor:pointer;溢出：隐藏；垂直对齐：中间；边距：-1px 0 1px 0； .ajax__calendar_year font-size:18px;height:46px;width:60px;text-align:center;cursor:pointer;overflow:hidden;垂直对齐：中间；

.ajax_日历 .ajax_calendar_container border:1px solid #646464;background-color:#ffffff;color:#000000; .ajax_日历 .ajax_calendar_footer border-top:1px solid #f5f5f5; .ajax_日历 .ajax_calendar_dayname border-bottom:1px solid #f5f5f5; .ajax_日历 .ajax_calendar_day border:1px solid #D3DEEF; .ajax_日历 .ajax_calendar_month border:1px solid #D3DEEF;background-color:#ffffff; .ajax_日历 .ajax_calendar_year border:1px solid #D3DEEF;background-color:#ffffff;

.ajax_日历 .ajax_calendar_active .ajax__calendar_day background-color:#edf9ff;border-color:#0066cc;color:#0066cc; .ajax_日历 .ajax_calendar_active .ajax__calendar_month background-color:#edf9ff;border-color:#0066cc;color:#0066cc; .ajax_日历 .ajax_calendar_active .ajax__calendar_year background-color:#edf9ff;border-color:#0066cc;color:#0066cc;

.ajax_日历 .ajax_calendar_other .ajax__calendar_day 背景颜色:#ffffff;边框颜色:#ffffff;颜色:#646464; .ajax_日历 .ajax_calendar_other .ajax__calendar_year background-color:#ffffff;border-color:#ffffff;color:#646464;

.ajax_日历 .ajax_calendar_hover .ajax__calendar_day background-color:#edf9ff;border-color:#daf2fc;color:#0066cc; .ajax_日历 .ajax_calendar_hover .ajax__calendar_month background-color:#edf9ff;border-color:#daf2fc;color:#0066cc; .ajax_日历 .ajax_calendar_hover .ajax__calendar_year background-color:#edf9ff;border-color:#daf2fc;color:#0066cc;

.ajax_日历 .ajax_calendar_hover .ajax__calendar_title color:#0066cc; .ajax_日历 .ajax_calendar_hover .ajax__calendar_today color:#0066cc;

使用这种 CSS 样式，我可以避免重叠，但是月份和年份不再足够大，并且不会填满整个屏幕。有没有人有这方面的经验？

【参考方案1】：

我自己也有一个与此非常相似的问题，最终发现几乎更多的是破解而不是解决方案。但它工作得很好，不会给我带来任何问题：

由于我无法放大日历，因此我缩小了其他所有内容并更改了页面的缩放属性，以使用户开始放大到足以使日历足够大。

有关设置初始缩放的帮助，请参阅 Showing mobile friendly web page without having to zoom in。另外，我发现如果您使用日历，日历通常足够大（在我看来）

<meta name="viewport" content="width = device-width" />

是的，您实际上输入了“device-width”，这将询问查看您页面的设备的宽度并使用它。