Code666 (代码贴、代码片段)

[JavaScript] 富客户端会议室预定系统 基于jquery插件fullcalendar →→→→→进入此内容的聊天室

来自 , 2019-06-03, 写在 JavaScript, 查看 116 次.
URL http://www.code666.cn/view/3e77a146
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2.  
  3. <HTML>
  4. <HEAD>
  5. <TITLE>Meeting Room Reservation System demo</TITLE>
  6. <META content="text/html; charset=UTF-8" http-equiv=content-type>
  7. <META name=description content="jQuery fullcalendar demo">
  8. <META name=keywords content="gbin1.com, jQuery full calendar">
  9. <META name=author content="terry li">
  10.  
  11. <link rel="stylesheet" href="css/mainstructure.css">
  12. <link rel="stylesheet" href="css/maincontent.css">
  13. <!-- Jquery and Jquery UI -->
  14.  
  15. <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
  16.  
  17. <script type="text/javascript" src="js/jquery-ui-1.8.6.custom.min.js"></script>
  18.  
  19. <script type="text/javascript" src="js/jquery-ui-timepicker-addon.js"></script>
  20.  
  21. <link rel="stylesheet" href="css/redmond/jquery-ui-1.8.1.custom.css">
  22.  
  23. <!-- Jquery and Jquery UI -->
  24.  
  25. <script src="js/formValidator/js/jquery.validationEngine.js" type="text/javascript"></script>
  26.  
  27. <script src="js/formValidator/js/jquery.validationEngine-en.js" type="text/javascript"></script>
  28.  
  29. <link rel="stylesheet" href="js/formValidator/css/validationEngine.jquery.css" type="text/css" media="screen" charset="utf-8" />
  30.  
  31. <!-- FullCalender -->
  32.  
  33. <link rel='stylesheet' type='text/css' href='js/fullcal/css/fullcalendar.css' />
  34. <script type='text/javascript' src='js/fullcal/fullcalendar.js'></script>
  35. </HEAD>
  36. <BODY>
  37.  
  38. <STYLE type=text/css>#loading {
  39.         TOP: 0px; RIGHT: 0px
  40. }
  41. .tooltip {
  42.         PADDING-BOTTOM: 25px; PADDING-LEFT: 25px; WIDTH: 160px; PADDING-RIGHT: 25px; DISPLAY: none; BACKGROUND: url(images/black_arrow.png); HEIGHT: 70px; COLOR: #fff; FONT-SIZE: 12px; PADDING-TOP: 25px; z-order: 100
  43. }
  44. </STYLE>
  45.  
  46. <DIV id=wrap>
  47. <SCRIPT type=text/javascript>
  48.  
  49.                         $(document).ready(function() {
  50.                                 $("#reserveformID").validationEngine({
  51.                                         validationEventTriggers:"keyup blur",
  52.                                         openDebug: true
  53.                                 }) ;
  54.                        
  55.                                 $("#start").timepicker({dateFormat:'yy-mm-dd', timeFormat:'hh:mm', hourMin: 5, hourMax: 24, hourGrid: 3, minuteGrid: 15});
  56.                                 $("#end").timepicker({dateFormat:'yy-mm-dd', timeFormat:'hh:mm', hourMin: 5, hourMax: 24, hourGrid: 3, minuteGrid: 15});
  57.                        
  58.  
  59.                                 $("#addhelper").hide();        
  60.                                
  61.                                 $('#calendar').fullCalendar({
  62.                                   header:{
  63.                                                 right: 'prev,next today',
  64.                                                 center: 'title',
  65.                                                 left: 'month,agendaWeek,agendaDay'
  66.                                   },
  67.                                   theme: true,
  68.                                   editable: true,
  69.                                   allDaySlot : false,
  70.                                   events:  function(start, end , callback){
  71.                                  
  72.                                         var events = [];
  73.                                         var now = new Date();
  74.                                         for(var i=-10;i<60;i++){
  75.                                                 var evtstart = new Date(now.getFullYear() , now.getMonth() , (now.getDate()-i), now.getHours()-5, now.getMinutes(), now.getSeconds(), now.getMilliseconds());
  76.  
  77.                                                 var evtend = new Date(now.getFullYear() , now.getMonth() , (now.getDate()-i), now.getHours(), now.getMinutes(), now.getSeconds(), now.getMilliseconds());                                                      
  78.                                        
  79.                                                 events.push({
  80.                                                         sid: 1,
  81.                                                         uid: 1,
  82.                                                         title: 'Daily Scrum meeting',
  83.                                                         start: evtstart,
  84.                                                         end: evtend,
  85.                                                         fullname: 'terry li',
  86.                                                         confname: 'Meeting 1',
  87.                                                         confshortname: 'M1',
  88.                                                         confcolor: '#ff3f3f',
  89.                                                         confid: 'test1',
  90.                                                         allDay: false,
  91.                                                         topic: 'Daily Scrum meeting',
  92.                                                         description : 'Daily Scrum meeting',
  93.                                                         id: 1,
  94.                                                 });                            
  95.                                         }                                              
  96.                                        
  97.                                         callback(events);
  98.                                   },
  99.                                   dayClick: function(date, allDay, jsEvent, view) {
  100.                                                         var selectdate = $.fullCalendar.formatDate(date, "yyyy-MM-dd");
  101.                                                        
  102.                                                         $( "#reservebox" ).dialog({
  103.                                                                 autoOpen: false,
  104.                                                                 height: 450,
  105.                                                                 width: 400,
  106.                                                                 title: 'Reserve meeting room on ' + selectdate,
  107.                                                                 modal: true,
  108.                                                                 position: "center",
  109.                                                                 draggable: false,
  110.                                                                 beforeClose: function(event, ui) {
  111.                                                                                 $.validationEngine.closePrompt("#meeting");
  112.                                                                                 $.validationEngine.closePrompt("#start");
  113.                                                                                 $.validationEngine.closePrompt("#end");                                                        
  114.                                                                 },
  115.                                                                 buttons: {
  116.                                                                         "close": function() {
  117.                                                                                 $( this ).dialog( "close" );
  118.                                                                         },
  119.                                                                         "reserve": function() {                        
  120.                                                                                 if($("#reserveformID").validationEngine({returnIsValid:true})){
  121.                                                                                         var startdatestr = $("#start").val();
  122.                                                                                         var enddatestr = $("#end").val();              
  123.                                                                                         var confid = $("#meeting").val();      
  124.                                                                                         var repweeks = $("#repweeks").val();   
  125.                                                                                         if(repweeks==null){
  126.                                                                                                 repweeks=0;
  127.                                                                                         }
  128.                                                                                         var startdate =  $.fullCalendar.parseDate(selectdate+"T"+startdatestr);
  129.                                                                                         var enddate =  $.fullCalendar.parseDate(selectdate+"T"+enddatestr);
  130.                                                                                         var schdata = {startdate:startdate, enddate:enddate, confid:confid, repweeks:repweeks};                                                                
  131.                                                                                 }      
  132.                                                                         }
  133.                                                                 }
  134.                                                         });
  135.                                                         $( "#reservebox" ).dialog( "open" );
  136.                                                 return false;
  137.                                   },
  138.                                   timeFormat: 'HH:mm{ - HH:mm}',
  139.                                   eventClick: function(event) {
  140.                                                 var fstart  = $.fullCalendar.formatDate(event.start, "yyyy/MM/dd HH:mm");
  141.                                                 var fend  = $.fullCalendar.formatDate(event.end, "HH:mm");                               
  142.                                                 var schdata = {sid:event.sid, deleted:1, uid:event.uid};
  143.                                                
  144.                                                 $( "#reserveinfo" ).dialog({
  145.                                                         autoOpen: false,
  146.                                                         height: 280,
  147.                                                         width: 400,
  148.                                                         modal: true,
  149.                                                         position: "center",
  150.                                                         draggable: false,
  151.                                                         buttons: {
  152.                                                                 "close": function() {
  153.                                                                         $( this ).dialog( "close" );
  154.                                                                 }
  155.                                                         }
  156.                                                 });
  157.                                                                                                                
  158.                                                 if(1==1||2==schdata.uid){
  159.                                                         $("#reserveinfo").dialog("option", "buttons", {
  160.                                                                 "Close": function() {
  161.                                                                         $( this ).dialog( "close" );
  162.                                                                 },
  163.                                                                
  164.                                                                 "Cancel the reservation": function() {
  165.                                                                         var answer = confirm("Are you sure to cancel the reservation?");
  166.                                                                         if(answer){
  167.                                                                                 identityService.updateScheduleDeleted(schdata, {
  168.                                                                                                 callback:function(data) {
  169.                                                                                                         alert("The reservation was canceled.");
  170.                                                                                                         window.location.reload();
  171.                                                                                                 }              
  172.                                                                                 });
  173.                                                                         }                                                                      
  174.                                                                 }
  175.                                                         });
  176.                                                 }
  177.                                                
  178.                                                 var showtopic = '';
  179.                                                
  180.                                                 if(event.topic.length>15){
  181.                                                         showtopic = event.topic.substring(0, 15) + '...';
  182.                                                 }else{
  183.                                                         showtopic = event.topic;
  184.                                                 }
  185.                                                
  186.                                                
  187.                                                 $("#revdesc").html('<div style="font-weight:bold;color:#5383c2;border-bottom: 1px dotted #5383c2; padding: 3px 0px 3px;">'  + showtopic   + "</div>" + '<div style="padding: 10px 0px 3px">'  + '<div style="width:128px;float:left;"><a href="/mrr/images/conf/' + event.confid +  '.jpg">' + event.confname +  '</a><div style="background:#A4C3E3; text-align:center; padding:5px;color:#1d5987;font-weight:bold;font-size:9px"><span style="background:'+ event.confcolor +';width:14px;height:14px;color:#E3E3E3;font-size:10px;position:relative;left:0;top:0;">' + event.confshortname + '</span>&nbsp;'+ event.confname + ' by ' + event.fullname +'</div></div><div style="float:right;width:220px; padding:0px ; margin:0px">' + event.description+ '</div><div style="clear:both"></div></div>');
  188.                                                
  189.                                                 $( "#reserveinfo" ).dialog(
  190.                                                         { title:  fstart + "-" + fend + " " + showtopic }
  191.                                                 );
  192.                                                
  193.                                                 $( "#reserveinfo" ).dialog( "open" );
  194.                                                 return false;
  195.                                   },
  196.                                   loading: function(bool) {
  197.                                                 if (bool) $('#loading').show();
  198.                                                 else $('#loading').hide();
  199.                                   },
  200.                                   eventMouseover: function(calEvent, jsEvent, view) {
  201.                                                 var fstart  = $.fullCalendar.formatDate(calEvent.start, "yyyy/MM/dd HH:mm");
  202.                                                 var fend  = $.fullCalendar.formatDate(calEvent.end, "HH:mm");  
  203.                                                 $(this).attr('title', fstart + " - " + fend + " " + calEvent.topic + " : " + calEvent.description);
  204.                                                 $(this).css('font-weight', 'normal');                          
  205.                                                 $(this).tooltip({
  206.                                                         effect:'toggle',
  207.                                                         cancelDefault: true
  208.                                                 });
  209.                                   },
  210.                                   eventMouseout: function(calEvent, jsEvent, view) {
  211.                                                 $(this).css('font-weight', 'normal');
  212.                                   },
  213.                                   eventRender: function(event, element) {
  214.                                         var fstart  = $.fullCalendar.formatDate(event.start, "HH:mm");
  215.                                         var fend  = $.fullCalendar.formatDate(event.end, "HH:mm");     
  216.                                         // Bug in IE8
  217.                                         //element.html('<a href=#>' + fstart + "-" +  fend + '<div style=color:#E5E5E5>' +  event.title + "</div></a>");
  218.                                   },
  219.                                   eventAfterRender : function(event, element, view) {
  220.                                         var fstart  = $.fullCalendar.formatDate(event.start, "HH:mm");
  221.                                         var fend  = $.fullCalendar.formatDate(event.end, "HH:mm");             
  222.                                         //element.html('<a href=#><div>Time: ' + fstart + "-" +  fend + '</div><div>Room:' + event.confname + '</div><div style=color:#E5E5E5>Host:' +  event.fullname + "</div></a>");
  223.                                        
  224.                                        
  225.                                         var confbg='';
  226.                                         if(event.confid==1){
  227.                                                 confbg = confbg + '<span class="fc-event-bg"></span>';
  228.                                         }else if(event.confid==2){
  229.                                                 confbg = confbg + '<span class="fc-event-bg"></span>';
  230.                                         }else if(event.confid==3){
  231.                                                 confbg = confbg + '<span class="fc-event-bg"></span>';
  232.                                         }else if(event.confid==4){
  233.                                                 confbg = confbg + '<span class="fc-event-bg"></span>';
  234.                                         }else if(event.confid==5){
  235.                                                 confbg = confbg + '<span class="fc-event-bg"></span>';
  236.                                         }else if(event.confid==6){
  237.                                                 confbg = confbg + '<span class="fc-event-bg"></span>';
  238.                                         }else{
  239.                                                 confbg = confbg + '<span class="fc-event-bg"></span>';
  240.                                         }
  241.                                        
  242.                                         var titlebg =  '<span class="fc-event-conf" style="background:'+  event.confcolor +'">' + event.confshortname + '</span>';
  243.                                        
  244.                                         if(event.repweeks>0){
  245.                                                 titlebg = titlebg + '<span class="fc-event-conf" style="background:#fff;top:0;right:15;color:#3974BC;font-weight:bold">R</span>';
  246.                                         }
  247.                                        
  248.                                         if(view.name=="month"){
  249.                                                 var evtcontent = '<div class="fc-event-vert"><a>';
  250.                                                 evtcontent = evtcontent + confbg;
  251.                                                 evtcontent = evtcontent + '<span class="fc-event-titlebg">' +  fstart + " - " +  fend + titlebg + '</span>';
  252.                                                 evtcontent = evtcontent + '<span>Room: ' +  event.confname + '</span>';
  253.                                                 evtcontent = evtcontent + '<span>Host: ' +  event.fullname + '</span>';
  254.                                                 evtcontent = evtcontent + '</a><div class="ui-resizable-handle ui-resizable-e"></div></div>';
  255.                                                 element.html(evtcontent);
  256.                                         }else if(view.name=="agendaWeek"){
  257.                                                 var evtcontent = '<a>';
  258.                                                 evtcontent = evtcontent + confbg;
  259.                                                 evtcontent = evtcontent + '<span class="fc-event-time">' +  fstart + "-" +  fend + titlebg + '</span>';
  260.                                                 evtcontent = evtcontent + '<span>' +  event.confname + ' by ' + event.fullname + '</span>';
  261.                                                 //evtcontent = evtcontent + '<span>' +  event.fullname + '</span>';
  262.                                                 evtcontent = evtcontent + '</a><span class="ui-icon ui-icon-arrowthick-2-n-s"><div class="ui-resizable-handle ui-resizable-s"></div></span>';
  263.                                                 element.html(evtcontent);                                              
  264.                                         }else if(view.name=="agendaDay"){
  265.                                                 var evtcontent = '<a>';
  266.                                                 evtcontent = evtcontent + confbg;
  267.                                                 evtcontent = evtcontent + '<span class="fc-event-time">' +  fstart + " - " +  fend + titlebg + '</span>';
  268.                                                 evtcontent = evtcontent + '<span>Room: ' +  event.confname + '</span>';
  269.                                                 evtcontent = evtcontent + '<span>Host: ' +  event.fullname + '</span>';
  270.                                                 evtcontent = evtcontent + '<span>Topic: ' +  event.topic + '</span>';
  271.                                                 evtcontent = evtcontent + '</a><span class="ui-icon ui-icon-arrow-2-n-s"><div class="ui-resizable-handle ui-resizable-s"></div></span>';
  272.                                                 element.html(evtcontent);                                                              
  273.                                         }
  274.                                   },
  275.                                   eventDragStart: function( event, jsEvent, ui, view ) {
  276.                                         ui.helper.draggable("option", "revert", true);
  277.                                   },
  278.                                   eventDragStop: function( event, jsEvent, ui, view ) {
  279.                                   },
  280.                                   eventDrop: function( event, dayDelta, minuteDelta, allDay, revertFunc, jsEvent, ui, view ) {
  281.  
  282.                                         if(1==1||2==event.uid){
  283.                                                 var schdata = {startdate:event.start, enddate:event.end, confid:event.confid, sid:event.sid};
  284.                                         }else{
  285.                                                 revertFunc();
  286.                                         }
  287.                                        
  288.                                   },
  289.                                   eventResizeStart:  function( event, jsEvent, ui, view ) {
  290.                                  
  291.                                         //alert('resizing');
  292.                                  
  293.                                   },
  294.                                   eventResize: function(event,dayDelta,minuteDelta,revertFunc) {
  295.  
  296.                                         if(1==1||2==event.uid){
  297.                                                 var schdata = {startdate:event.start, enddate:event.end, confid:event.confid, sid:event.sid};
  298.  
  299.                                         }else{
  300.                                                 revertFunc();
  301.                                         }
  302.  
  303.                                   }
  304.  
  305.                                 });
  306.                                
  307.                                 //goto date function
  308.                                 if($.browser.msie){
  309.                                         $("#calendar .fc-header-right table td:eq(0)").before('<td><div class="ui-state-default ui-corner-left ui-corner-right" style="border-right:0px;padding:1px 3px 2px;" ><input type="text" id="selecteddate" size="10" style="padding:0px;"></div></td><td><div class="ui-state-default ui-corner-left ui-corner-right"><a><span id="selectdate" class="ui-icon ui-icon-search">goto</span></a></div></td><td><span class="fc-header-space"></span></td>');
  310.                                 }else{
  311.                                         $("#calendar .fc-header-right table td:eq(0)").before('<td><div class="ui-state-default ui-corner-left ui-corner-right" style="border-right:0px;padding:3px 2px 4px;" ><input type="text" id="selecteddate" size="10" style="padding:0px;"></div></td><td><div class="ui-state-default ui-corner-left ui-corner-right"><a><span id="selectdate" class="ui-icon ui-icon-search">goto</span></a></div></td><td><span class="fc-header-space"></span></td>');
  312.                                 }
  313.                                
  314.                                 $("#selecteddate").datepicker({
  315.                                         dateFormat:'yy-mm-dd',
  316.                                         beforeShow: function (input, instant) {  
  317.                                                 setTimeout(
  318.                                                         function () {
  319.                                                                 $('#ui-datepicker-div').css("z-index", 15);
  320.                                                         }, 100
  321.                                                 );
  322.                                         }
  323.                                 });
  324.                                                                
  325.  
  326.                                
  327.                                 $("#selectdate").click(function() {
  328.                                         var selectdstr =        $("#selecteddate").val();      
  329.                                         var selectdate = $.fullCalendar.parseDate(selectdstr, "yyyy-mm-dd");                                   
  330.                                         $('#calendar').fullCalendar( 'gotoDate', selectdate.getFullYear(), selectdate.getMonth(), selectdate.getDate());
  331.                                 });
  332.                                
  333.                                
  334.                                 // conference function
  335.                                 $("#calendar .fc-header-left table td:eq(0)").before('<td><div class="ui-state-default ui-corner-left ui-corner-right" id="selectmeeting"><a><span id="selectdate" class="ui-icon ui-icon-search" style="float: left;padding-left: 5px; padding-top:1px"></span>meeting room</a></div></td><td><span class="fc-header-space"></span></td>');
  336.                                
  337.  
  338.                                
  339.                                
  340.                                
  341.                         });
  342.  
  343.                
  344.                        
  345.                         function validate2time(){
  346.                                 //alert("debug");
  347.                                
  348.                                 var cresult = compare2time($("#start").val(), $("#end").val());
  349.                                 if(cresult==0){
  350.                                         return false;
  351.                                 }else if(cresult==1){
  352.                                         $.validationEngine.closePrompt("#start");
  353.                                         return true;
  354.                                 }
  355.  
  356.                         }
  357.                        
  358.                 </SCRIPT>
  359.  
  360.  
  361. <DIV id=calendar></DIV>
  362.  
  363. <DIV id=reserveinfo title=Details>
  364. <DIV id=revtitle></DIV>
  365. <DIV id=revdesc></DIV></DIV>
  366. <DIV style="DISPLAY: none" id=reservebox title="Reserve meeting room">
  367. <FORM id=reserveformID method=post>
  368. <DIV class=sysdesc>&nbsp;</DIV>
  369. <DIV class=rowElem><LABEL>meeting room:</LABEL> <!--<input type="text" name="meeting" id="meeting" class="validate[required]">--><SELECT
  370. id=meeting class=validate[required] name=meeting></SELECT> </DIV>
  371. <DIV class=rowElem><LABEL>Repeated weeks:</LABEL> <SELECT id=repweeks
  372. name=repweeks> <OPTION selected value=0>Not repeated</OPTION> <OPTION
  373.   value=2>1 week</OPTION> <OPTION value=3>2 weeks</OPTION> <OPTION value=4>3
  374.   weeks</OPTION> <OPTION value=5>4 weeks</OPTION> <OPTION value=9>8
  375.   weeks</OPTION> <OPTION value=17>16 weeks</OPTION> <OPTION value=33>32
  376.   weeks</OPTION></SELECT> </DIV>
  377. <DIV class=rowElem><LABEL>start time:</LABEL> <INPUT id=start
  378. class=validate[required,funcCall[validate2time]] name=start> </DIV>
  379. <DIV class=rowElem><LABEL>end time:</LABEL> <INPUT id=end
  380. class=validate[required,funcCall[validate2time]] name=end> </DIV>
  381. <DIV class=rowElem><LABEL>Title:</LABEL> <INPUT id=title name=title> </DIV>
  382. <DIV class=rowElem><LABEL>Details:</LABEL> <TEXTAREA id=details rows=3 cols=43 name=details></TEXTAREA> </DIV>
  383. <DIV class=rowElem> </DIV>
  384. <DIV class=rowElem> </DIV>
  385. <DIV id=addhelper class=ui-widget>
  386. <DIV
  387. style="PADDING-BOTTOM: 5px; PADDING-LEFT: 5px; PADDING-RIGHT: 5px; PADDING-TOP: 5px"
  388. class="ui-state-error ui-corner-all">
  389. <DIV id=addresult></DIV></DIV></DIV></FORM></DIV></DIV>
  390. <DIV id=footer>Copyright 2011 by <A
  391. href="http://www.gbin1.com/">http://www.gbin1.com</A>
  392. </DIV>
  393.  
  394. <!-- google and baidu code -->
  395. <script type="text/javascript">
  396.   var _gaq = _gaq || [];
  397.   _gaq.push(['_setAccount', 'UA-19118450-1']);
  398.   _gaq.push(['_trackPageview']);
  399.   (function() {
  400.         var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
  401.         ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
  402.         var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  403.   })();
  404. </script>
  405. <script type="text/javascript">
  406. var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
  407. document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3Fd999331ad5ea0c0930f3aa7c3bda9fc1' type='text/javascript'%3E%3C/script%3E"));
  408. </script>
  409. <!-- end of google and baidu code -->
  410.  
  411.  
  412. </BODY>
  413. </HTML>
  414.  

回复 "富客户端会议室预定系统 基于jquery插件fullcalendar"

这儿你可以回复上面这条便签

captcha

贴代码片段 - Code666