<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
<title>Custom data binding</title>
<!-- jQuery Include -->
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<!-- Mobiscroll JS and CSS Includes -->
<link rel="stylesheet" href="css/mobiscroll.custom-2.15.1.min.css" type="text/css" />
<script src="js/mobiscroll.custom-2.15.1.min.js"></script>
<style type="text/css">
/* Demo Page styling, you can ignore this in your implementation */
body {
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
-webkit-font-smoothing: antialiased;
}
button {
display: inline-block;
text-decoration: none;
padding: 0.8em 2.6em;
margin: 20px 10px 0 0;
outline: 0;
border: 0;
overflow: visible;
cursor: pointer;
color: #fff;
background: #5185a8;
font-family: Arial, sans-serif, verdana;
font-size: 14px;
font-weight: 100;
-webkit-transition: background 0.3s ease-out;
-moz-transition: background 0.3s ease-out;
-o-transition: background 0.3s ease-out;
transition: background 0.3s ease-out;
}
button:hover {
background: #34566d;
}
input {
width: 100%;
margin: 0 0 10px 0;
padding: 10px;
border: 1px solid #ccc;
border-radius: 0;
background: #fff;
font-family: Arial, sans-serif,verdana;
text-shadow: none;
color: #000;
font-size: 15px;
-webkit-appearance: none;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.demo-iframe {
padding: 10px 10px 10px 10px;
text-shadow: none;
}
/* Demo specific styling */
div .demo-sync { padding: 0; }
div .demo-sync #demo { display: block; }
div .demo-sync #show { position: static; }
div .demo-sync .icc { padding: 0; }
div .demo-sync .ic { text-align: left; }
div .demo-sync .ic p { padding: 0 5px; color: #000; text-shadow: none; }
div .demo-sync .md-cal-auth { display: block; margin-top: 10px; width: 100%;}
.md-cal-list { list-style: none; margin: 0; padding: 0;}
.md-cal-list li { position: relative; list-style: none; margin: 0; padding: 0; background: #f0f0f0; border-bottom: 1px solid #b1b1b1; border-top: 1px solid #fff; padding: 5px 40px 5px 10px; color: #333; }
.md-cal-list h3 { margin: 5px 0; font-weight: normal; }
.md-cal-list p { display: block; margin: 5px 0; color: #717171; }
.md-cal-color { width: 5px; height: 100%; position: absolute; top: 0; left: 0; }
.md-cal-list .md-cal-sync { position: absolute; right: 0; top: 0; padding-top:25px; padding-right:15px; text-decoration: underline; }
.md-cal-btn-c {padding: 0 5px;}
.demo-preview .demo-phone-screen .demo-iframe {padding: 0;}
.demo-preview .demo-note { margin: 5px;}
</style>
<script type="text/javascript">
$(function () {
function getFirstAndLastDay(year, month) {
firstDay = new Date(year, month, 1);
lastDay = new Date(year, month + 1, 0);
}
function addEventsToList(list, name, id, color, startDate, endDate) {
list.push({
start: startDate, // More info about start: http://docs.mobiscroll.com/2-15-1/calendar#!opt-start
end: endDate, // More info about end: http://docs.mobiscroll.com/2-15-1/calendar#!opt-end
text: name, // More info about text: http://docs.mobiscroll.com/2-15-1/calendar#!opt-text
calendarId: id, // More info about calendarId: http://docs.mobiscroll.com/2-15-1/calendar#!opt-calendarId
color: color // More info about color: http://docs.mobiscroll.com/2-15-1/calendar#!opt-color
});
}
function callBackSetEvent(list) {
if (requestCounter == 0) {
calendar.mobiscroll('setEvents', list);
}
}
function callBackAddevent(list) {
calendar.mobiscroll('addEvent', list);
}
// Facebook functions
function loadFacebookSDK() {
window.fbAsyncInit = function () {
// init the FB JS SDK
FB.init({
appId : '<!--FacebookAppID-->', // App ID from the app dashboard
status : true, // Check Facebook Login status
xfbml : false // Look for social plugins on the page
});
};
// Load the SDK asynchronously
(function (d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return; }
js = d.createElement(s);
js.id = id;
js.src = "//connect.facebook.net/en_US/all.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
}
function getFBEvents(id, list, callBack, button) {
var noreply = false;
if (button) {
button.text('Syncing...');
}
calId[id] = true;
if (id == 'nfb') {
noreply = true;
}
requestCounter++;
FB.api('me/events/' + (noreply ? "not_replied" : "") + '?since=' + firstDay.getTime() / 1000 + '&until=' + lastDay.getTime() / 1000 + '', { fields: 'name,id,start_time,end_time' }, function (resp) {
if (resp.data) {
$.each(resp.data, function (i, v) {
addEventsToList(list, v.name, id, noreply ? '#3EA9F8' : '#3B5998', new Date(v.start_time), (v.end_time) ? new Date(v.end_time) : '');
});
requestCounter--;
}
if (button) {
button.text('Hide');
}
callBack(list);
});
}
function clearFBEvents(id, button) {
var i,
list = calendar.mobiscroll('getEvents'),
l = [];
for (i = 0; i < list.length; i++) {
if (list[i].calendarId == id) {
l.push(list[i]._id);
}
}
calendar.mobiscroll('removeEvent', l);
if (button) {
button.text("Show");
}
}
function createFBList() {
if ($('#fbList li').length == 0) {
$("#fbList").html('<li><h3>Facebook</h3><p>Events Attending</p><a href="#" class="md-cal-sync" id="fb">Show</a><div style="background-color:#3B5998"
h5移动开发中日历插件
1星 需积分: 50 134 浏览量
2017-12-19
22:11:25
上传
评论
收藏 89KB ZIP 举报 
calendar-demos.zip （24个子文件） 
calendar-demos css 
icons_mobiscroll.ttf 20KB .DS_Store 6KB mobiscroll.custom-2.15.1.min.css 35KB
calendar_sync.html 17KB calendar_rtl.html 4KB calendar_colored.html 4KB calendar_week.html 4KB calendar_multimonth.html 4KB calendar_datetime.html 3KB calendar_event.html 4KB calendar_basic.html 3KB calendar_invalid.html 4KB calendar_markedtext.html 5KB js mobiscroll.custom-2.15.1.min.js 77KB .DS_Store 8KB calendar_interactive.html 4KB calendar_weekcounter.html 4KB calendar_time.html 4KB calendar_multiday.html 4KB calendar_vertical.html 4KB calendar_icons.html 5KB calendar_marked.html 4KB calendar_date.html 3KB calendar_multiweek.html 4KB资源评论
qq_239212692019-08-14原始代码 看不懂的 片子一个
