Fullcalendar.io迅速成为日历应用程序的首选库。 是否可以将其用作<input type="date">选择器? 类似于jQuery UI“ Datepicker”

我想吃点类似的东西

<form>
<input type="date">
</form>

<script type="text/javascript">
$('input[type=date]').fullCalendar()
</script>

#1楼 票数:0

通过以下操作,我得到了想要的东西,

$(document).ready(function() {

    $('#foo').click( function () {
        var $input = $(this);
        alert('bar');
        console.log({sibs: $input.siblings().length });
        if ( $input.siblings('.minical').length == 0 ) {

        var $cal = $("<div>", {class:"minical"});
        $input.parent().append($cal);
        $cal.fullCalendar({
          theme: true,
          aspectRatio:1,

          dayRender: function ( date, cell ) {
              $(cell).parent().parent().addClass('hello');
          },

          header: {
              left: 'prevYear,prev,today',
              center: 'title',
              right: 'next,nextYear'            
          },
          dayClick: function ( date, jsEvent, view ) {
              $input.val( date.format() );
              $cal.remove();
          },
          contentHeight: 'auto',
          defaultView: 'month',
          editable: false,
        });
        }
    });

});

而且,CSS

.minical {
    width:200px;
    border: 1px solid black;
    font-size:8px;
}
.minical .fc-row {
    min-height:20px !important;
    height:10px;
    margin:0;
    padding:0 !important;
}
.minical h2 {
    font-size: .8em;
    text-align: center; 
}
.minical button { padding: 0; margin:0; }
.minical .fc-past { color:lightgray }
.minical .fc-day-number { font-size: .8em }
.minical .fc-day-header { font-size: .9em }

在这里找到一个例子

  ask by Evan Carroll translate from so

未解决问题?本站智能推荐:

1回复

Fullcalendar 和 jQuery 日期选择器

我正在使用 fullcalendar v2.7.1 和 jQuery datepicker。 从日期选择器中选择一个月/一年后,如何将完整日历推进到从日期选择器中选择的值? 旧版本的 fullcalendar v1.5.4 使用以下代码工作。 jQuery
1回复

带日期范围选择器的全日历

我想在我的Fullcalendar上设置日期选择器范围。 我看过一些帖子,您可以使用日期选择器选择日期,但是我希望用户能够选择开始日期和结束日期。 我的全日历看起来像下图,我想在红色方块上添加日期选择器。 这是我正在使用的代码。 如何/在哪里添加日期选择器?
1回复

在FullCalendar问题中设置默认的点击选择突出显示

我正在使用全日历,网格设置为1/2小时间隔(slotMinutes设置为30分钟)。 我希望默认点击选择至少持续1小时,但我希望开始时间以30分钟为增量。 换句话说,我不希望用户突出显示少于一个小时的任何时段,但是我希望他们能够突出显示从小时或半小时开始的1小时时段(即:1:30-2:30)
2回复

寻找生日的日期选择器,而不是jQuery UI Datepicker

我正在寻找一个像这样的js / jQuery插件datepicker http://www.styledisplay.com/mootoolsdatepicker/,因为这个使用MooTools,并且下拉年份和月份 非常感谢
2回复

Javascript日期选择器日历

我希望能够在用户输入之前在日期框中指定默认日期。 日历的JavaScript为: 然后页面上的HTML行是: 但是,脚本将值强制为空。 当页面打开时,“开始日期”会短暂闪烁,然后恢复为空白(JavaScript完全加载后)。 如果我注释掉脚本行,则“ startdate
1回复

Fullcalendar:如何更改月份的显示?

日历效果很好: 但是需要能够带上迷你日历: 如何以这种形式修改日历? 我是通过eventRender等方法看到的,但是不太明白是怎么做的。 日历的主要区别在于“大”我们显示了事件列表,而在小日历中,当您单击特定日期时会出现“弹出窗口”。
9回复

FullCalendar 中的重复事件

我正在使用 jQuery FullCalendar 作为我的网站中用于可用性议程的日历。 fullcalendar 中是否有任何功能/方法/选项可以按天处理我的重复事件? 例如,星期一只到时间 7:00AM 到 9:00AM,星期二 - 4:00PM 到 9:00PM,诸如此类?
2回复

fullCalendar 不是函数,事件未呈现

我正在尝试运行一个使用 fullcalendar 交互插件的非常基本的脚本。 我希望用户通过在日历中标记正确的日期或时间来输入事件(选择)。 例如,在标记了 8 月 5 日到 8 月 9 日之后,提示会询问事件标题。 用户输入“假期”,脚本会自动将信息“从...到”流式传输到事件数据。 但问题是,在