Repositorio del curso CCOM4030 el semestre B91 del proyecto Artesanías con el Instituto de Cultura

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299
  1. /*
  2. Author: Jack Ducasse;
  3. Version: 0.1.0;
  4. (◠‿◠✿)
  5. */
  6. var Calendar = function(model, options, date){
  7. // Default Values
  8. this.Options = {
  9. Color: '',
  10. LinkColor: '',
  11. NavShow: true,
  12. NavVertical: false,
  13. NavLocation: '',
  14. DateTimeShow: true,
  15. DateTimeFormat: 'mmm, yyyy',
  16. DatetimeLocation: '',
  17. EventClick: '',
  18. EventTargetWholeDay: false,
  19. DisabledDays: [],
  20. ModelChange: model
  21. };
  22. // Overwriting default values
  23. for(var key in options){
  24. this.Options[key] = typeof options[key]=='string'?options[key].toLowerCase():options[key];
  25. }
  26. model?this.Model=model:this.Model={};
  27. this.Today = new Date();
  28. this.Selected = this.Today
  29. this.Today.Month = this.Today.getMonth();
  30. this.Today.Year = this.Today.getFullYear();
  31. if(date){this.Selected = date}
  32. this.Selected.Month = this.Selected.getMonth();
  33. this.Selected.Year = this.Selected.getFullYear();
  34. this.Selected.Days = new Date(this.Selected.Year, (this.Selected.Month + 1), 0).getDate();
  35. this.Selected.FirstDay = new Date(this.Selected.Year, (this.Selected.Month), 1).getDay();
  36. this.Selected.LastDay = new Date(this.Selected.Year, (this.Selected.Month + 1), 0).getDay();
  37. this.Prev = new Date(this.Selected.Year, (this.Selected.Month - 1), 1);
  38. if(this.Selected.Month==0){this.Prev = new Date(this.Selected.Year-1, 11, 1);}
  39. this.Prev.Days = new Date(this.Prev.getFullYear(), (this.Prev.getMonth() + 1), 0).getDate();
  40. };
  41. function createCalendar(calendar, element, adjuster){
  42. if(typeof adjuster !== 'undefined'){
  43. var newDate = new Date(calendar.Selected.Year, calendar.Selected.Month + adjuster, 1);
  44. calendar = new Calendar(calendar.Model, calendar.Options, newDate);
  45. element.innerHTML = '';
  46. }else{
  47. for(var key in calendar.Options){
  48. typeof calendar.Options[key] != 'function' && typeof calendar.Options[key] != 'object' && calendar.Options[key]?element.className += " " + key + "-" + calendar.Options[key]:0;
  49. }
  50. }
  51. var months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
  52. function AddSidebar(){
  53. var sidebar = document.createElement('div');
  54. sidebar.className += 'cld-sidebar';
  55. var monthList = document.createElement('ul');
  56. monthList.className += 'cld-monthList';
  57. for(var i = 0; i < months.length - 3; i++){
  58. var x = document.createElement('li');
  59. x.className += 'cld-month';
  60. var n = i - (4 - calendar.Selected.Month);
  61. // Account for overflowing month values
  62. if(n<0){n+=12;}
  63. else if(n>11){n-=12;}
  64. // Add Appropriate Class
  65. if(i==0){
  66. x.className += ' cld-rwd cld-nav';
  67. x.addEventListener('click', function(){
  68. typeof calendar.Options.ModelChange == 'function'?calendar.Model = calendar.Options.ModelChange():calendar.Model = calendar.Options.ModelChange;
  69. createCalendar(calendar, element, -1);});
  70. x.innerHTML += '<svg height="15" width="15" viewBox="0 0 100 75" fill="rgba(255,255,255,0.5)"><polyline points="0,75 100,75 50,0"></polyline></svg>';
  71. }
  72. else if(i==months.length - 4){
  73. x.className += ' cld-fwd cld-nav';
  74. x.addEventListener('click', function(){
  75. typeof calendar.Options.ModelChange == 'function'?calendar.Model = calendar.Options.ModelChange():calendar.Model = calendar.Options.ModelChange;
  76. createCalendar(calendar, element, 1);} );
  77. x.innerHTML += '<svg height="15" width="15" viewBox="0 0 100 75" fill="rgba(255,255,255,0.5)"><polyline points="0,0 100,0 50,75"></polyline></svg>';
  78. }
  79. else{
  80. if(i < 4){x.className += ' cld-pre';}
  81. else if(i > 4){x.className += ' cld-post';}
  82. else{x.className += ' cld-curr';}
  83. //prevent losing var adj value (for whatever reason that is happening)
  84. (function () {
  85. var adj = (i-4);
  86. //x.addEventListener('click', function(){createCalendar(calendar, element, adj);console.log('kk', adj);} );
  87. x.addEventListener('click', function(){
  88. typeof calendar.Options.ModelChange == 'function'?calendar.Model = calendar.Options.ModelChange():calendar.Model = calendar.Options.ModelChange;
  89. createCalendar(calendar, element, adj);} );
  90. x.setAttribute('style', 'opacity:' + (1 - Math.abs(adj)/4));
  91. x.innerHTML += months[n].substr(0,3);
  92. }()); // immediate invocation
  93. if(n==0){
  94. var y = document.createElement('li');
  95. y.className += 'cld-year';
  96. if(i<5){
  97. y.innerHTML += calendar.Selected.Year;
  98. }else{
  99. y.innerHTML += calendar.Selected.Year + 1;
  100. }
  101. monthList.appendChild(y);
  102. }
  103. }
  104. monthList.appendChild(x);
  105. }
  106. sidebar.appendChild(monthList);
  107. if(calendar.Options.NavLocation){
  108. document.getElementById(calendar.Options.NavLocation).innerHTML = "";
  109. document.getElementById(calendar.Options.NavLocation).appendChild(sidebar);
  110. }
  111. else{element.appendChild(sidebar);}
  112. }
  113. var mainSection = document.createElement('div');
  114. mainSection.className += "cld-main";
  115. function AddDateTime(){
  116. var datetime = document.createElement('div');
  117. datetime.className += "cld-datetime";
  118. if(calendar.Options.NavShow && !calendar.Options.NavVertical){
  119. var rwd = document.createElement('div');
  120. rwd.className += " cld-rwd cld-nav";
  121. rwd.addEventListener('click', function(){createCalendar(calendar, element, -1);} );
  122. rwd.innerHTML = '<svg height="15" width="15" viewBox="0 0 75 100" fill="rgba(0,0,0,0.5)"><polyline points="0,50 75,0 75,100"></polyline></svg>';
  123. datetime.appendChild(rwd);
  124. }
  125. var today = document.createElement('div');
  126. today.className += ' today';
  127. today.innerHTML = months[calendar.Selected.Month] + ", " + calendar.Selected.Year;
  128. datetime.appendChild(today);
  129. if(calendar.Options.NavShow && !calendar.Options.NavVertical){
  130. var fwd = document.createElement('div');
  131. fwd.className += " cld-fwd cld-nav";
  132. fwd.addEventListener('click', function(){createCalendar(calendar, element, 1);} );
  133. fwd.innerHTML = '<svg height="15" width="15" viewBox="0 0 75 100" fill="rgba(0,0,0,0.5)"><polyline points="0,0 75,50 0,100"></polyline></svg>';
  134. datetime.appendChild(fwd);
  135. }
  136. if(calendar.Options.DatetimeLocation){
  137. document.getElementById(calendar.Options.DatetimeLocation).innerHTML = "";
  138. document.getElementById(calendar.Options.DatetimeLocation).appendChild(datetime);
  139. }
  140. else{mainSection.appendChild(datetime);}
  141. }
  142. function AddLabels(){
  143. var labels = document.createElement('ul');
  144. labels.className = 'cld-labels';
  145. var labelsList = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
  146. for(var i = 0; i < labelsList.length; i++){
  147. var label = document.createElement('li');
  148. label.className += "cld-label";
  149. label.innerHTML = labelsList[i];
  150. labels.appendChild(label);
  151. }
  152. mainSection.appendChild(labels);
  153. }
  154. function AddDays(){
  155. // Create Number Element
  156. function DayNumber(n){
  157. var number = document.createElement('p');
  158. number.className += "cld-number";
  159. number.innerHTML += n;
  160. return number;
  161. }
  162. var days = document.createElement('ul');
  163. days.className += "cld-days";
  164. // Previous Month's Days
  165. for(var i = 0; i < (calendar.Selected.FirstDay); i++){
  166. var day = document.createElement('li');
  167. day.className += "cld-day prevMonth";
  168. //Disabled Days
  169. var d = i%7;
  170. for(var q = 0; q < calendar.Options.DisabledDays.length; q++){
  171. if(d==calendar.Options.DisabledDays[q]){
  172. day.className += " disableDay";
  173. }
  174. }
  175. var number = DayNumber((calendar.Prev.Days - calendar.Selected.FirstDay) + (i+1));
  176. day.appendChild(number);
  177. days.appendChild(day);
  178. }
  179. // Current Month's Days
  180. for(var i = 0; i < calendar.Selected.Days; i++){
  181. var day = document.createElement('li');
  182. day.className += "cld-day currMonth";
  183. //Disabled Days
  184. var d = (i + calendar.Selected.FirstDay)%7;
  185. for(var q = 0; q < calendar.Options.DisabledDays.length; q++){
  186. if(d==calendar.Options.DisabledDays[q]){
  187. day.className += " disableDay";
  188. }
  189. }
  190. var number = DayNumber(i+1);
  191. // Check Date against Event Dates
  192. for(var n = 0; n < calendar.Model.length; n++){
  193. var evDate = calendar.Model[n].Date;
  194. var toDate = new Date(calendar.Selected.Year, calendar.Selected.Month, (i+1));
  195. if(evDate.getTime() == toDate.getTime()){
  196. number.className += " eventday";
  197. var title = document.createElement('span');
  198. title.className += "cld-title";
  199. if(typeof calendar.Model[n].Link == 'function' || calendar.Options.EventClick){
  200. var a = document.createElement('a');
  201. a.setAttribute('href', '#');
  202. a.innerHTML += calendar.Model[n].Title;
  203. if(calendar.Options.EventClick){
  204. var z = calendar.Model[n].Link;
  205. if(typeof calendar.Model[n].Link != 'string'){
  206. a.addEventListener('click', calendar.Options.EventClick.bind.apply(calendar.Options.EventClick, [null].concat(z)) );
  207. if(calendar.Options.EventTargetWholeDay){
  208. day.className += " clickable";
  209. day.addEventListener('click', calendar.Options.EventClick.bind.apply(calendar.Options.EventClick, [null].concat(z)) );
  210. }
  211. }else{
  212. a.addEventListener('click', calendar.Options.EventClick.bind(null, z) );
  213. if(calendar.Options.EventTargetWholeDay){
  214. day.className += " clickable";
  215. day.addEventListener('click', calendar.Options.EventClick.bind(null, z) );
  216. }
  217. }
  218. }else{
  219. a.addEventListener('click', calendar.Model[n].Link);
  220. if(calendar.Options.EventTargetWholeDay){
  221. day.className += " clickable";
  222. day.addEventListener('click', calendar.Model[n].Link);
  223. }
  224. }
  225. title.appendChild(a);
  226. }else{
  227. title.innerHTML += '<a href="' + calendar.Model[n].Link + '">' + calendar.Model[n].Title + '</a>';
  228. }
  229. number.appendChild(title);
  230. }
  231. }
  232. day.appendChild(number);
  233. // If Today..
  234. if((i+1) == calendar.Today.getDate() && calendar.Selected.Month == calendar.Today.Month && calendar.Selected.Year == calendar.Today.Year){
  235. day.className += " today";
  236. }
  237. days.appendChild(day);
  238. }
  239. // Next Month's Days
  240. // Always same amount of days in calander
  241. var extraDays = 13;
  242. if(days.children.length>35){extraDays = 6;}
  243. else if(days.children.length<29){extraDays = 20;}
  244. for(var i = 0; i < (extraDays - calendar.Selected.LastDay); i++){
  245. var day = document.createElement('li');
  246. day.className += "cld-day nextMonth";
  247. //Disabled Days
  248. var d = (i + calendar.Selected.LastDay + 1)%7;
  249. for(var q = 0; q < calendar.Options.DisabledDays.length; q++){
  250. if(d==calendar.Options.DisabledDays[q]){
  251. day.className += " disableDay";
  252. }
  253. }
  254. var number = DayNumber(i+1);
  255. day.appendChild(number);
  256. days.appendChild(day);
  257. }
  258. mainSection.appendChild(days);
  259. }
  260. if(calendar.Options.Color){
  261. mainSection.innerHTML += '<style>.cld-main{color:' + calendar.Options.Color + ';}</style>';
  262. }
  263. if(calendar.Options.LinkColor){
  264. mainSection.innerHTML += '<style>.cld-title a{color:' + calendar.Options.LinkColor + ';}</style>';
  265. }
  266. element.appendChild(mainSection);
  267. if(calendar.Options.NavShow && calendar.Options.NavVertical){
  268. AddSidebar();
  269. }
  270. if(calendar.Options.DateTimeShow){
  271. AddDateTime();
  272. }
  273. AddLabels();
  274. AddDays();
  275. }
  276. function caleandar(el, data, settings){
  277. var obj = new Calendar(data, settings);
  278. createCalendar(obj, el);
  279. }