移动网络 - 添加到日历功能 [关闭]

Question

如何在移动网页中实现添加到日历？有没有办法实现这一点。所有智能手机都将支持此功能。

Answer 1

很遗憾，HTML5 规范指定的日历仍未在不同的 HTML5 之间正确实施，因此您需要使用第 3 方实施。

日期选择器

如果您的 jQuery Mobile 网站需要它们（查看您的问题历史记录），您可以随时为 jQuery Mobile 使用第三方日期选择器。 3 可用，它们很棒。不幸的是，只有 Mobiscroll 可以跨平台使用，因为它支持不同的皮肤。如果您使用的是 jQuery Mobile，我建议您使用这也是一个日期选择器。

Mobiscroll - http://jsfiddle.net/Gajotres/WDjfR/

$(document).on('pagebeforeshow', '#index', function(){       
    $('#demo').mobiscroll().date({
        invalid: { daysOfWeek: [0, 6], daysOfMonth: ['5/1', '12/24', '12/25'] },
        theme: 'android-ics',
        display: 'inline',
        mode: 'scroller',
        dateOrder: 'dd mm yy',
        dateFormat : "dd-mm-yy"
    });  
});

Mobipick - http://jsfiddle.net/Gajotres/zyVjE/

$(document).on('pagebeforeshow', '#index', function(){       
    $('#demo').mobipick({
        dateFormat: "MM-dd-yyyy"
    });
});

Datebox - http://jsfiddle.net/Gajotres/ktbcP/

<input name="mydate" id="mydate" type="date" data-role="datebox" data-options='{"mode": "datebox", "useNewStyle":true, "dateFormat": "mm/dd/YYYY"}'/>

可以在此博客 article 中找到更多工作示例。

日历

但是如果你想要一个真正的日历实现，我已经使用了一个，可能还有更多，但这个响应足够快。虽然不是专门为 jQuery Mobile 创建的，但它可以正常工作。即使创建一个普通的网站，这个插件也是一个真正的怪物。

FullCalendar - http://jsfiddle.net/Gajotres/ZSd2C/

在此示例中，您可以看到它对较小屏幕的反应。

$(document).on('pageshow','#index',function(e,data){    
    var date = new Date();
    var d = date.getDate();
    var m = date.getMonth();
    var y = date.getFullYear();

    $('#calendar').fullCalendar({
        editable: true,
        events: [
            {
                title: 'All Day Event',
                start: new Date(y, m, 1)
            },
            {
                title: 'Long Event',
                start: new Date(y, m, d-5),
                end: new Date(y, m, d-2)
            },
            {
                id: 999,
                title: 'Repeating Event',
                start: new Date(y, m, d-3, 16, 0),
                allDay: false
            },
            {
                id: 999,
                title: 'Repeating Event',
                start: new Date(y, m, d+4, 16, 0),
                allDay: false
            },
            {
                title: 'Meeting',
                start: new Date(y, m, d, 10, 30),
                allDay: false
            },
            {
                title: 'Lunch',
                start: new Date(y, m, d, 12, 0),
                end: new Date(y, m, d, 14, 0),
                allDay: false
            },
            {
                title: 'Birthday Party',
                start: new Date(y, m, d+1, 19, 0),
                end: new Date(y, m, d+1, 22, 30),
                allDay: false
            },
            {
                title: 'Click for Google',
                start: new Date(y, m, 28),
                end: new Date(y, m, 29),
                url: 'http://google.com/'
            }
        ]
    });
});

Answer 2

<input type="date" />

New HTML5 Date input

-

要将该日期链接到您的日历/应用程序，您可能需要write a browser extension，获取扩展程序以将On Hold event 附加到您浏览的每个页面上的每个Date input。

可以open your calendar via URL link。如果日历没有协议处理程序，您可以编写自己的日历应用程序和assign it a protocol to handle