62,047
社区成员
发帖
与我相关
我的任务
分享Calendar.js 日期给所有周末 都添加上放假的标签
C# MVC oa开发 人事考勤需要设置放假管理，我们使用的是Calendar.js 插件
1、需要默认将所有的周末都默认设置为放假，然后人事可以一次性保存
2、时间范围2020-01-01 到2100-12-31，
3、再次添加 比较的时候上次选中 放假 或者正常上班的都要正确选中或者不被选中
4、截图如下
图片下方还有保存按钮
1、需要默认将所有的周末都默认设置为放假，然后人事可以一次性保存
2、时间范围2020-01-01 到2100-12-31，
3、再次添加 比较的时候上次选中 放假 或者正常上班的都要正确选中或者不被选中
4、截图如下
图片下方还有保存按钮
...全文
请发表友善的回复…
发表回复
Romantic_321 2021-07-06
- 打赏
- 举报
博主，这个问题解决了吗？
快乐起航2020 2021-07-12
- 举报
没有
Romantic_321 2021-07-12
- 举报
我后来是拼接js搞得。。
快乐起航2020 2020-03-05
- 打赏
- 举报
上面，看到没
极客诗人 2020-03-04
- 打赏
- 举报
要不就把你的Js弄个链接发出来 要不把这个插件地址给我 弄了半天 不是一回事
快乐起航2020 2020-03-04
- 打赏
- 举报
800=>2800[/quote]
快乐起航2020 2020-03-04
- 打赏
- 举报
[/quote]
我寻思着 这个源码 就800多行 自己改一下很难吗？[/quote]
日期控件的时间范围是跟自带的属性绑定写死的，我们有办法把它分离开来 ，另外重新遍历？
插件的引用的大小都2m多了，你如何确定只有800多行的代码极客诗人 2020-03-04
- 打赏
- 举报
800=>2800
极客诗人 2020-03-04
- 打赏
- 举报
[/quote]
我寻思着 这个源码 就800多行 自己改一下很难吗？快乐起航2020 2020-03-04
- 打赏
- 举报
快乐起航2020 2020-03-04
- 打赏
- 举报
样式和时间 它用属性写死，没有让我们提供给我们赋值的接口快乐起航2020 2020-03-04
- 打赏
- 举报
不明白你的想法！这个插件你用过么？
极客诗人 2020-03-04
- 打赏
- 举报
Id 为（meizzDay + X） X为 0 6 7 13 14 20 27 为周末 自己渲染写样式呗
快乐起航2020 2020-03-04
- 打赏
- 举报
在线等，求助大神
快乐起航2020 2020-03-04
- 打赏
- 举报
<div class="row">
<div class="col-sm-9">
<div class="space"></div>
<div id="calendar"></div>
</div>
</div>
<script type="text/javascript">
window.jQuery || document.write("<script src='/Content/assets/js/jquery-2.0.3.min.js'><" + "/script>");
</script>
<!-- <![endif]-->
<!--[if IE]>
<script type="text/javascript">
window.jQuery || document.write("<script src='/Content/assets/js/jquery-1.10.2.min.js'>"+"<"+"/script>");
</script>
<![endif]-->
<script type="text/javascript">
if ("ontouchend" in document) document.write("<script src='/Content/assets/js/jquery.mobile.custom.min.js'>" + "<" + "/script>");
</script>
<script src="/Content/assets/js/bootstrap.min.js"></script>
<script src="/Content/assets/js/typeahead-bs2.min.js"></script>
<!-- page specific plugin scripts -->
<script src="/Content/assets/js/jquery-ui-1.10.3.custom.min.js"></script>
<script src="/Content/assets/js/jquery.ui.touch-punch.min.js"></script>
<script src="/Content/assets/js/fullcalendar.min.js"></script>
<script src="/Content/assets/js/bootbox.min.js"></script>
<!-- ace scripts -->
<script src="/Content/assets/js/ace-elements.min.js"></script>
<script src="/Content/assets/js/ace.min.js"></script>
<!-- inline scripts related to this page -->
<script type="text/javascript">
/*1.加载的时候判断日期 周末时间，此时不需要点击，并给周末贴上放假的 标签 */
jQuery(function ($) {
/* initialize the external events
-----------------------------------------------------------------*/
$('#external-events div.external-event').each(function () {
// create an Event Object (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/)
// it doesn't need to have a start or end
var eventObject = {
title: $.trim($(this).text()) // use the element's text as the event title
};
// store the Event Object in the DOM element so we can get to it later
$(this).data('eventObject', eventObject);
// make the event draggable using jQuery UI
$(this).draggable({
zIndex: 999,
revert: true, // will cause the event to go back to its
revertDuration: 0 // original position after the drag
});
});
/* initialize the calendar
-----------------------------------------------------------------*/
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
//console.log("d:"+d+",m:"+m+",y:"+y);
//console.log(new Date(2100,11,31));
var calendar = $('#calendar').fullCalendar({
buttonText: {
prev: '<i class="icon-chevron-left"></i>',
next: '<i class="icon-chevron-right"></i>'
},
header: {
left: 'prev,next today',
center: 'title',
right: 'month'//'month,agendaWeek,agendaDay'
},
events: [
/*20.03.04*/
//{
// title: 'All Day Event',
// start: new Date(y, m, 1),
// className: 'label-important'
//},
//{
// title: 'Long Event',
// start: new Date(y, m, d - 5),
// end: new Date(y, m, d - 2),
// className: 'label-success'
//},
@*@for (var d = Convert.ToDateTime("2020-01-01"); d <= Convert.ToDateTime("2100-12-31"); d=d.AddDays(1)) {
var day = d.DayOfWeek;
var b = (day == DayOfWeek.Saturday || day == DayOfWeek.Sunday);*@
//{
// title: '放假',
// start: new Date(2020, 2, 1),
// end: new Date(2100, 11, 31),
// className: 'label-success'
//},
//}
//{
// title: 'Some Event',
// start: new Date(y, m, d - 3, 16, 0),
// allDay: false
//}
],
editable: true,
droppable: true, // this allows things to be dropped onto the calendar !!!
drop: function (date, allDay) { // this function is called when something is dropped
// retrieve the dropped element's stored Event Object
var originalEventObject = $(this).data('eventObject');
var $extraEventClass = $(this).attr('data-class');
// we need to copy it, so that multiple events don't have a reference to the same object
var copiedEventObject = $.extend({}, originalEventObject);
// assign it the date that was reported
copiedEventObject.start = date;
copiedEventObject.allDay = allDay;
if ($extraEventClass) copiedEventObject['className'] = [$extraEventClass];
// render the event on the calendar
// the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/)
$('#calendar').fullCalendar('renderEvent', copiedEventObject, true);
// is the "remove after drop" checkbox checked?
if ($('#drop-remove').is(':checked')) {
// if so, remove the element from the "Draggable Events" list
$(this).remove();
}
}
,
selectable: true,
selectHelper: true,
select: function (start, end, allDay) {
console.log(start + "|" + end + "|" + allDay);
/*20.03.03*/
//bootbox.prompt("New Event Title:", function (title) {
// if (title !== null) {
// calendar.fullCalendar('renderEvent',
// {
// title: title,
// start: start,
// end: end,
// allDay: allDay
// },
// true // make the event "stick"
// );
// }
//});
//calendar.fullCalendar('unselect');
debugger;
calendar.fullCalendar('renderEvent',
{
title: "放假1111",
start: start,
end: end,
allDay: allDay
},
true // make the event "stick"
);
},/*20.03.04*/
eventClick: function (calEvent, jsEvent, view) {
//alert(5 + ",calEvent:" + calEvent + ",jsEvent:" + jsEvent + ",view:" + view);
var form = $("<form class='form-inline'><label>Change event name </label></form>");
form.append("<input class='middle' autocomplete=off type=text value='" + calEvent.title + "' /> ");
form.append("<button type='submit' class='btn btn-sm btn-success'><i class='icon-ok'></i> Save</button>");
var div = bootbox.dialog({
message: form,
buttons: {
"delete": {
"label": "<i class='icon-trash'></i> Delete Event",
"className": "btn-sm btn-danger",
"callback": function () {
calendar.fullCalendar('removeEvents', function (ev) {
return (ev._id == calEvent._id);
})
}
},
"close": {
"label": "<i class='icon-remove'></i> Close",
"className": "btn-sm"
}
}
});
//alert(7);
form.on('submit', function () {
calEvent.title = form.find("input[type=text]").val();
calendar.fullCalendar('updateEvent', calEvent);
div.modal("hide");
return false;
});
}
});
})
</script>
<script type="text/javascript">
var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3Fe9e1d61340ff3d9495a8cca04ebdb49d' type='text/javascript'%3E%3C/script%3E"));
</script>
