1. <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  2. <link rel="stylesheet" href="/resources/demos/style.css">
  3. <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  4. <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  5. <script src='https://zsl85.sharepoint.com/sites/LMS/SiteAssets/Holiday/moment.js'></script>
  6. <style type="text/css">
  7. .ui-datepicker td.holiday a,
  8. .ui-datepicker td.holiday a:hover {
  9. background: #C0392B;
  10. border: 1px solid #BF5A0C;
  11. }
  12. </style>
  13. <script type="text/javascript">
  14. var holidays1 = [];
  15. $(document).ready(function() {
  16. var siteUrl = _spPageContextInfo.siteAbsoluteUrl;
  17. var oDataUrl = siteUrl + "/_api/web/lists/getbytitle('HolidayList')/items?$select=Date,Holiday";
  18. $.ajax({
  19. url: oDataUrl,
  20. type: "GET",
  21. dataType: "json",
  22. headers: {
  23. "accept": "application/json;odata=verbose"
  24. },
  25. success: mySuccHandler,
  26. error: myErrHandler
  27. });
  29. function mySuccHandler(data, request) {
  30. if (data.d.results.length >= 1) {
  31. $.each(data.d.results, function(key, val) {
  32. var GetYear = moment(val.Date).format("YYYY");
  33. var GetMonth = moment(val.Date).format("MM");
  34. var GetDay = moment(val.Date).format("DD");
  35. var Holiday = val.Holiday;
  36. holidays1.push([GetYear, GetMonth, GetDay, Holiday]);
  37. });
  38. $("#date").datepicker({
  39. beforeShowDay: setHoliDays
  40. });
  42. function setHoliDays(date) {
  43. var holiDays = holidays1;
  44. for (i = 0; i < holiDays.length; i++) {
  45. if (date.getFullYear() == holiDays[i][0] && date.getMonth() == holiDays[i][1] - 1 && date.getDate() == holiDays[i][2]) {
  46. return [true, 'holiday', holiDays[i][3]];
  47. }
  48. }
  49. return [true, ""];
  50. }
  51. }
  52. }
  54. function myErrHandler(data, errCode, errMessage) {
  55. alert("Error: " + errMessage);
  56. }
  57. });
  58. </script>
  59. <div id="Container">
  60. <p>Holidays <input type="text" id="date" readonly="true"></p>
  61. </div>