javascript - I Need to show bootstrap modal when i click on calendar cell (dncalendar) -
i need how show modal when click on calendar cell, im using dncalendar. want if u click on cell modal open & shows event date on time.. this design calendar
(function(a){a.fn.dncalendar=function(n){var l=a(this);var b={};var d=new date();var i=null;var f=new date();var e=function(q,s){var r=new date(q,s-1,1);var o=new date(q,s,0);var p=r.getday()+o.getdate();return math.ceil(p/7)};var h=function(){var z=d.getmonth();var ag=d.getdate();var t=d.getfullyear();var j=b.monthnames[z];if(b.monthuseshortname==true){j=b.monthnamesshort[z]}var x=a("<div id='dncalendar-header' class='dncalendar-header'></div>");x.append("<h2>"+j+" "+t+"</h2>");var v=false;var r=null;if(typeof b.mindate!=="undefined"){var aj=b.mindate.split("-");r=new date(aj[0],aj[1]-1,aj[2]);if(r.getfullyear()>=t){if(r.getmonth()>=z){v=true}}}var m=false;var a=null;if(typeof b.maxdate!=="undefined"){var f=b.maxdate.split("-");a=new date(f[0],f[1]-1,f[2]);if(a.getfullyear()<=t){if(a.getmonth()<=z){m=true}}}var q=a("<div id='dncalendar-links' class='dncalendar-links'></div>");var w=a("<div id='dncalendar-prev-month' class='dncalendar-prev-month'></div>");var b=a("<div id='dncalendar-next-month' class='dncalendar-next-month'></div>");if(v){w.addclass("dncalendar-inactive");w.removeattr("id")}if(m){b.addclass("dncalendar-inactive");b.removeattr("id")}q.append(w);q.append(b);x.append(q);var c=a("<div id='dncalendar-body' class='dncalendar-body'></div>");var p=a("<table></table>");var n=b.daynames;if(b.dayuseshortname==true){n=b.daynamesshort}var q=a("<thead></thead>");var p=a("<tr></tr>");var af=n.length;for(var ad=0;ad<af;ad++){p.append("<td "+((ad==0||ad==af-1)?'class="holiday"':"")+">"+n[ad]+"</td>")}q.append(p);var u=a("<tbody></tbody>");var x=e(t,z+1);var e=7;var t=1;var o=new date(t,z,1);var ah=new date(t,z+1,0);var o=new date(t,z,0);var r=o.getdate()-o.getday()+1;var s=new date(t,z+1,1);var y=s.getdate();var k=0;if(r!=null){k=r.getdate()}var s=0;if(a!=null){s=a.getdate()}var z="today";var ac="default date";if(typeof b.datatitles!=="undefined"){if(typeof b.datatitles.defaultdate!=="undefined"){ac=b.datatitles.defaultdate}if(typeof b.datatitles.today!=="undefined"){z=b.datatitles.today}}for(var ad=0;ad<x;ad++){var v=a("<tr></tr>");for(var ab=0;ab<e;ab++){if((ad!=0&&ad!=x-1)||(ad==0&&ab>=o.getday())||(ad==x-1&&ab<=ah.getday())){var w="";var h="";if(f.getfullyear()==t&&f.getmonth()==z&&f.getdate()==t){w=" today-date ";h="data-title='"+z+"'"}if(i!=null&&i.getfullyear()==t&&i.getmonth()==z&&i.getdate()==t){w=" default-date ";h="data-title='"+ac+"'"}if(ab==0||ab==e-1){w+=" holiday "}if(typeof b.notes!=="undefined"){if(k(new date(t,z,t))){w+=" note "}}var u="<td id='calendarclick' class='"+w+" calendarclick' data-date='"+t+"' data-month='"+(z+1)+"' data-year='"+t+"'><div class='entry' "+h+">"+t+"</div></td>";if(r!=null){if(r.getfullyear()>=t){if(r.getmonth()>=z&&t<k){u="<td class='"+w+"' data-date='"+t+"' data-month='"+(z+1)+"' data-year='"+t+"'><div class='entry' "+h+">"+t+"</div></td>"}}}if(a!=null){if(a.getfullyear()<=t){if(a.getmonth()<=z&&t>s){u="<td class='"+w+"' data-date='"+t+"' data-month='"+(z+1)+"' data-year='"+t+"'><div class='entry' "+h+">"+t+"</div></td>"}}}v.append(u);t++}else{if(ad==0){var w="";var h="";if(f.getfullyear()==o.getfullyear()&&f.getmonth()==o.getmonth()&&f.getdate()==r){w=" today-date ";h="data-title='"+z+"'"}if(i!=null&&i.getfullyear()==o.getfullyear()&&i.getmonth()==o.getmonth()&&i.getdate()==r){w=" default-date ";h="data-title='"+ac+"'"}if(ab==0||ab==e-1){w+=" holiday "}if(typeof b.notes!=="undefined"){if(k(new date(o.getfullyear(),o.getmonth(),r))){w+=" note "}}var u="<td id='calendarclick' class='"+w+"' data-date='"+r+"' data-month='"+(o.getmonth()+1)+"' data-year='"+o.getfullyear()+"'><div class='entry' "+h+">"+r+"</div></td>";if(r!=null){if(r.getfullyear()>o.getfullyear()){u="<td class='"+w+"' data-date='"+r+"' data-month='"+(o.getmonth()+1)+"' data-year='"+o.getfullyear()+"'><div class='entry' "+h+">"+r+"</div></td>"}else{if(r.getfullyear()==o.getfullyear()&&r.getmonth()>o.getmonth()){u="<td class='"+w+"' data-date='"+r+"' data-month='"+(o.getmonth()+1)+"' data-year='"+o.getfullyear()+"'><div class='entry' "+h+">"+r+"</div></td>"}}}v.append(u);r++}if(ad==x-1){var w="";var h="";if(f.getfullyear()==s.getfullyear()&&f.getmonth()==s.getmonth()&&f.getdate()==y){w=" today-date ";h="data-title='"+z+"'"}if(i!=null&&i.getfullyear()==s.getfullyear()&&i.getmonth()==s.getmonth()&&i.getdate()==y){w=" default-date ";h="data-title='"+ac+"'"}if(ab==0||ab==e-1){w+=" holiday "}if(typeof b.notes!=="undefined"){if(k(new date(s.getfullyear(),s.getmonth(),y))){w+=" note "}}var u="<td id='calendarclick' class='"+w+"' data-date='"+y+"' data-month='"+(s.getmonth()+1)+"' data-year='"+s.getfullyear()+"'><div class='entry' "+h+">"+y+"</div></td>";if(a!=null){if(a.getfullyear()<=s.getfullyear()){if(a.getmonth()<=s.getmonth()){if(a.getmonth()<s.getmonth()){u="<td class='"+w+"' data-date='"+y+"' data-month='"+(s.getmonth()+1)+"' data-year='"+s.getfullyear()+"'><div class='entry' "+h+">"+y+"</div></td>"}else{if(s<y){u="<td class='"+w+"' data-date='"+y+"' data-month='"+(s.getmonth()+1)+"' data-year='"+s.getfullyear()+"'><div class='entry' "+h+">"+y+"</div></td>"}}}}}v.append(u);y++}}}u.append(v)}var ai="";if(b.shownotes){var aa=m();var l=aa.length;if(l>0){ai=a("<ul class='dncalendar-note-list'></ul>");for(var ad=0;ad<l;ad++){var ae=aa[ad].date;var g=aa[ad].notes;var d=g.length;var i="";i+="<li class='date'>";i+="<span>"+ae+"</span> ";if(d>0){i+=" : ";for(var ab=0;ab<d;ab++){i+=g[ab];if(d<=ab){i+=", "}}}i+="</li>";ai.append(i)}}}p.append(q);p.append(u);c.append(p);l.html("");l.append(x);l.append(c);l.append(ai)};var k=function(p){var s=b.notes.length;for(var r=0;r<s;r++){var q=b.notes[r].date.split("-");var o=new date(q[0],q[1]-1,q[2]);if(o.getfullyear()==p.getfullyear()&&o.getmonth()==p.getmonth()&&o.getdate()==p.getdate()){return true}}return false};var m=function(){var p=[];var t=b.notes.length;for(var s=0;s<t;s++){var r=b.notes[s].date.split("-");var o=new date(r[0],r[1]-1,r[2]);if(o.getfullyear()==d.getfullyear()&&o.getmonth()==d.getmonth()){var q={};q.date=o.getdate();q.notes=b.notes[s].note;p.push(q)}}return p};var g=function(){var o=new date(d.getfullyear(),d.getmonth()+1,1);var p=o.getdate();var r=o.getmonth();var q=o.getfullyear();d=new date(q,r,p);h()};var c=function(){var q=new date(d.getfullyear(),d.getmonth()-1,1);var o=q.getdate();var r=q.getmonth();var p=q.getfullyear();d=new date(p,r,o);h()};var j=function(){a("body").on("click","#calendarclick",function(){var o=a(this).data("date");var p=a(this).data("month");var q=a(this).data("year");b.dayclick.call(this,new date(q,p-1,o),l)});a("body").on("click","#dncalendar-prev-month",function(){c()});a("body").on("click","#dncalendar-next-month",function(){g()})};return{build:function(){b=a.extend({},a.fn.dncalendar.defaults,n);if(typeof b.defaultdate!=="undefined"){var o=b.defaultdate.split("-");d=new date(o[0],o[1]-1,o[2]);i=d}h();j()},update:function(p){b=a.extend(b,p);if(typeof b.defaultdate!=="undefined"){var o=b.defaultdate.split("-");d=new date(o[0],o[1]-1,o[2]);i=d}h()}}};a.fn.dncalendar.defaults={monthnames:["january","february","march","april","may","june","july","august","september","october","november","december"],monthnamesshort:["jan","feb","mar","apr","may","jun","jul","agu","sep","okt","nov","dec"],daynames:["sun","mon","tue","wed","thu","fri","sat"],daynamesshort:["sun","mon","tue","wed","thu","fri","sat"],dayuseshortname:false,monthuseshortname:false,shownotes:false,dayclick:function(c,b){}}}(jquery));.dncalendar-inactive{opacity:.2}.dncalendar-header{margin:20px 0;position:relative}.dncalendar-header h2{color:#fa8a20;font-size:20px;line-height:1;text-align:center}.dncalendar-header .dncalendar-links{height:19px;width:100%;position:absolute;top:2px}.dncalendar-header .dncalendar-links div{cursor:pointer;width:35px;height:35px;-webkit-user-select:none;touch-action:pan-y;-webkit-user-drag:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}.dncalendar-header .dncalendar-links .dncalendar-next-month{position:absolute;right:-6px;background:url('../images/arrow.png') no-repeat -111px 0;background-size:148px 31px}.dncalendar-header .dncalendar-links .dncalendar-prev-month{position:absolute;left:10px;background:url('../images/arrow.png') no-repeat 0 0;background-size:148px 31px}.dncalendar-body{margin:0 0 10px}.dncalendar-body table{width:100%;text-align:center;border-collapse:collapse;font-size:15px}.dncalendar-body table th,td{display:table-cell;margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}.dncalendar-body thead td{color:#727272;font-size:11px;text-transform:uppercase;padding:10px 0}.dncalendar-body tbody tr td{width:13%;border-top:1px solid #ddd;color:#bdbdbd;background:#f8f8f8;text-decoration:none;vertical-align:middle}.dncalendar-body tbody td#calendarclick{cursor:pointer}.dncalendar-body tbody td.calendarclick{color:#434343;background:#fff}.dncalendar-body tbody td .entry{padding:11px 0 13px;position:relative}.dncalendar-body tbody td.calendarclick:active{background:#ddd}.dncalendar-body tbody td .entry:after{content:attr(data-title);left:0;position:absolute;font-size:10px;bottom:1px;text-align:center;width:100%}.dncalendar-body table td.holiday{color:#fa8a20 !important}.dncalendar-body table td.calendarclick.holiday{color:#fa8a20 !important}.dncalendar-body table td.default-date{border:1px solid #eee;color:#fff !important;background:#fa8a20}.dncalendar-body table td.calendarclick.default-date{border:1px solid #ddd;color:#fff !important;background:#fa8a20}.dncalendar-body table td.today-date{border:1px solid #7ee699;color:#7ee699 !important;background:#e9fdee}.dncalendar-body table td.calendarclick.today-date{border:1px solid rgba(100%,100%,100%,0.0);color:#fa8a20 !important;background:#ffecd9}.dncalendar-body table td.note,.dncalendar-body table td.calendarclick.note{position:relative}.dncalendar-body table td.note:before{display:block;position:absolute;width:0;height:0;top:0;right:0;content:"";border-top:5px solid #c55;border-right:5px solid #c55;border-left:5px solid transparent;border-bottom:5px solid transparent}.dncalendar-body table td.calendarclick.note:before{display:block;position:absolute;width:0;height:0;top:0;right:0;content:"";border-top:5px solid #d00;border-right:5px solid #d00;border-left:5px solid transparent;border-bottom:5px solid transparent}.dncalendar-note-list{list-style:none;margin-left:4.5%;margin-bottom:20px;padding:0;color:#999}.dncalendar-note-list .date{color:#d00}<link rel="stylesheet" href="css/dncalendar-skin.min.css"> <script src="//code.jquery.com/jquery-1.11.3.min.js"></script> <!---calendar here ---> <div id="dncalendar-container"> </div> <!---end calendar ---> <script type="text/javascript"> $(document).ready(function() { var my_calendar = $("#dncalendar-container").dncalendar({ datatitles: { defaultdate: 'default', today : 'today' }, notes: [ { "date": "2016-02-25", "note": ["date here"] }, { "date": "2016-02-28", "note": ["date here"] } ], shownotes: true, dayclick: function(date, view) { alert(date.getdate() + "-" + (date.getmonth() + 1) + "-" + date.getfullyear()); } }); // init calendar my_calendar.build(); // update calendar my_calendar.update({ mindate: "2016-02-23", defaultdate: new date() }); }); </script>thank
here go;
add modal html markup
<div id="mymodal" class="modal fade" role="dialog"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h4 class="modal-title">modal header</h4> </div> <div class="modal-body"></div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">close</button> </div> </div> </div> </div> changed in following js
dayclick: function(date, view) { var selecteddate = date.getdate() + "-" + (date.getmonth() + 1) + "-" + date.getfullyear(); $('#mymodal').modal('show').on('shown.bs.modal', function () { $('.modal-body').html(selecteddate); }); } - added
selecteddatevariable current date - on click calendar date, modal show via javascript
$('#mymodal').modal('show') - use modal
shown.bs.modalevent , passvar selecteddatevalue$('.modal-body')when modal shown.
same way, can pass other information along side calendar date.
(function(a){a.fn.dncalendar=function(n){var l=a(this);var b={};var d=new date();var i=null;var f=new date();var e=function(q,s){var r=new date(q,s-1,1);var o=new date(q,s,0);var p=r.getday()+o.getdate();return math.ceil(p/7)};var h=function(){var z=d.getmonth();var ag=d.getdate();var t=d.getfullyear();var j=b.monthnames[z];if(b.monthuseshortname==true){j=b.monthnamesshort[z]}var x=a("<div id='dncalendar-header' class='dncalendar-header'></div>");x.append("<h2>"+j+" "+t+"</h2>");var v=false;var r=null;if(typeof b.mindate!=="undefined"){var aj=b.mindate.split("-");r=new date(aj[0],aj[1]-1,aj[2]);if(r.getfullyear()>=t){if(r.getmonth()>=z){v=true}}}var m=false;var a=null;if(typeof b.maxdate!=="undefined"){var f=b.maxdate.split("-");a=new date(f[0],f[1]-1,f[2]);if(a.getfullyear()<=t){if(a.getmonth()<=z){m=true}}}var q=a("<div id='dncalendar-links' class='dncalendar-links'></div>");var w=a("<div id='dncalendar-prev-month' class='dncalendar-prev-month'></div>");var b=a("<div id='dncalendar-next-month' class='dncalendar-next-month'></div>");if(v){w.addclass("dncalendar-inactive");w.removeattr("id")}if(m){b.addclass("dncalendar-inactive");b.removeattr("id")}q.append(w);q.append(b);x.append(q);var c=a("<div id='dncalendar-body' class='dncalendar-body'></div>");var p=a("<table></table>");var n=b.daynames;if(b.dayuseshortname==true){n=b.daynamesshort}var q=a("<thead></thead>");var p=a("<tr></tr>");var af=n.length;for(var ad=0;ad<af;ad++){p.append("<td "+((ad==0||ad==af-1)?'class="holiday"':"")+">"+n[ad]+"</td>")}q.append(p);var u=a("<tbody></tbody>");var x=e(t,z+1);var e=7;var t=1;var o=new date(t,z,1);var ah=new date(t,z+1,0);var o=new date(t,z,0);var r=o.getdate()-o.getday()+1;var s=new date(t,z+1,1);var y=s.getdate();var k=0;if(r!=null){k=r.getdate()}var s=0;if(a!=null){s=a.getdate()}var z="today";var ac="default date";if(typeof b.datatitles!=="undefined"){if(typeof b.datatitles.defaultdate!=="undefined"){ac=b.datatitles.defaultdate}if(typeof b.datatitles.today!=="undefined"){z=b.datatitles.today}}for(var ad=0;ad<x;ad++){var v=a("<tr></tr>");for(var ab=0;ab<e;ab++){if((ad!=0&&ad!=x-1)||(ad==0&&ab>=o.getday())||(ad==x-1&&ab<=ah.getday())){var w="";var h="";if(f.getfullyear()==t&&f.getmonth()==z&&f.getdate()==t){w=" today-date ";h="data-title='"+z+"'"}if(i!=null&&i.getfullyear()==t&&i.getmonth()==z&&i.getdate()==t){w=" default-date ";h="data-title='"+ac+"'"}if(ab==0||ab==e-1){w+=" holiday "}if(typeof b.notes!=="undefined"){if(k(new date(t,z,t))){w+=" note "}}var u="<td id='calendarclick' class='"+w+" calendarclick' data-date='"+t+"' data-month='"+(z+1)+"' data-year='"+t+"'><div class='entry' "+h+">"+t+"</div></td>";if(r!=null){if(r.getfullyear()>=t){if(r.getmonth()>=z&&t<k){u="<td class='"+w+"' data-date='"+t+"' data-month='"+(z+1)+"' data-year='"+t+"'><div class='entry' "+h+">"+t+"</div></td>"}}}if(a!=null){if(a.getfullyear()<=t){if(a.getmonth()<=z&&t>s){u="<td class='"+w+"' data-date='"+t+"' data-month='"+(z+1)+"' data-year='"+t+"'><div class='entry' "+h+">"+t+"</div></td>"}}}v.append(u);t++}else{if(ad==0){var w="";var h="";if(f.getfullyear()==o.getfullyear()&&f.getmonth()==o.getmonth()&&f.getdate()==r){w=" today-date ";h="data-title='"+z+"'"}if(i!=null&&i.getfullyear()==o.getfullyear()&&i.getmonth()==o.getmonth()&&i.getdate()==r){w=" default-date ";h="data-title='"+ac+"'"}if(ab==0||ab==e-1){w+=" holiday "}if(typeof b.notes!=="undefined"){if(k(new date(o.getfullyear(),o.getmonth(),r))){w+=" note "}}var u="<td id='calendarclick' class='"+w+"' data-date='"+r+"' data-month='"+(o.getmonth()+1)+"' data-year='"+o.getfullyear()+"'><div class='entry' "+h+">"+r+"</div></td>";if(r!=null){if(r.getfullyear()>o.getfullyear()){u="<td class='"+w+"' data-date='"+r+"' data-month='"+(o.getmonth()+1)+"' data-year='"+o.getfullyear()+"'><div class='entry' "+h+">"+r+"</div></td>"}else{if(r.getfullyear()==o.getfullyear()&&r.getmonth()>o.getmonth()){u="<td class='"+w+"' data-date='"+r+"' data-month='"+(o.getmonth()+1)+"' data-year='"+o.getfullyear()+"'><div class='entry' "+h+">"+r+"</div></td>"}}}v.append(u);r++}if(ad==x-1){var w="";var h="";if(f.getfullyear()==s.getfullyear()&&f.getmonth()==s.getmonth()&&f.getdate()==y){w=" today-date ";h="data-title='"+z+"'"}if(i!=null&&i.getfullyear()==s.getfullyear()&&i.getmonth()==s.getmonth()&&i.getdate()==y){w=" default-date ";h="data-title='"+ac+"'"}if(ab==0||ab==e-1){w+=" holiday "}if(typeof b.notes!=="undefined"){if(k(new date(s.getfullyear(),s.getmonth(),y))){w+=" note "}}var u="<td id='calendarclick' class='"+w+"' data-date='"+y+"' data-month='"+(s.getmonth()+1)+"' data-year='"+s.getfullyear()+"'><div class='entry' "+h+">"+y+"</div></td>";if(a!=null){if(a.getfullyear()<=s.getfullyear()){if(a.getmonth()<=s.getmonth()){if(a.getmonth()<s.getmonth()){u="<td class='"+w+"' data-date='"+y+"' data-month='"+(s.getmonth()+1)+"' data-year='"+s.getfullyear()+"'><div class='entry' "+h+">"+y+"</div></td>"}else{if(s<y){u="<td class='"+w+"' data-date='"+y+"' data-month='"+(s.getmonth()+1)+"' data-year='"+s.getfullyear()+"'><div class='entry' "+h+">"+y+"</div></td>"}}}}}v.append(u);y++}}}u.append(v)}var ai="";if(b.shownotes){var aa=m();var l=aa.length;if(l>0){ai=a("<ul class='dncalendar-note-list'></ul>");for(var ad=0;ad<l;ad++){var ae=aa[ad].date;var g=aa[ad].notes;var d=g.length;var i="";i+="<li class='date'>";i+="<span>"+ae+"</span> ";if(d>0){i+=" : ";for(var ab=0;ab<d;ab++){i+=g[ab];if(d<=ab){i+=", "}}}i+="</li>";ai.append(i)}}}p.append(q);p.append(u);c.append(p);l.html("");l.append(x);l.append(c);l.append(ai)};var k=function(p){var s=b.notes.length;for(var r=0;r<s;r++){var q=b.notes[r].date.split("-");var o=new date(q[0],q[1]-1,q[2]);if(o.getfullyear()==p.getfullyear()&&o.getmonth()==p.getmonth()&&o.getdate()==p.getdate()){return true}}return false};var m=function(){var p=[];var t=b.notes.length;for(var s=0;s<t;s++){var r=b.notes[s].date.split("-");var o=new date(r[0],r[1]-1,r[2]);if(o.getfullyear()==d.getfullyear()&&o.getmonth()==d.getmonth()){var q={};q.date=o.getdate();q.notes=b.notes[s].note;p.push(q)}}return p};var g=function(){var o=new date(d.getfullyear(),d.getmonth()+1,1);var p=o.getdate();var r=o.getmonth();var q=o.getfullyear();d=new date(q,r,p);h()};var c=function(){var q=new date(d.getfullyear(),d.getmonth()-1,1);var o=q.getdate();var r=q.getmonth();var p=q.getfullyear();d=new date(p,r,o);h()};var j=function(){a("body").on("click","#calendarclick",function(){var o=a(this).data("date");var p=a(this).data("month");var q=a(this).data("year");b.dayclick.call(this,new date(q,p-1,o),l)});a("body").on("click","#dncalendar-prev-month",function(){c()});a("body").on("click","#dncalendar-next-month",function(){g()})};return{build:function(){b=a.extend({},a.fn.dncalendar.defaults,n);if(typeof b.defaultdate!=="undefined"){var o=b.defaultdate.split("-");d=new date(o[0],o[1]-1,o[2]);i=d}h();j()},update:function(p){b=a.extend(b,p);if(typeof b.defaultdate!=="undefined"){var o=b.defaultdate.split("-");d=new date(o[0],o[1]-1,o[2]);i=d}h()}}};a.fn.dncalendar.defaults={monthnames:["january","february","march","april","may","june","july","august","september","october","november","december"],monthnamesshort:["jan","feb","mar","apr","may","jun","jul","agu","sep","okt","nov","dec"],daynames:["sun","mon","tue","wed","thu","fri","sat"],daynamesshort:["sun","mon","tue","wed","thu","fri","sat"],dayuseshortname:false,monthuseshortname:false,shownotes:false,dayclick:function(c,b){}}}(jquery));.dncalendar-inactive{opacity:.2}.dncalendar-header{margin:20px 0;position:relative}.dncalendar-header h2{color:#fa8a20;font-size:20px;line-height:1;text-align:center}.dncalendar-header .dncalendar-links{height:19px;width:100%;position:absolute;top:2px}.dncalendar-header .dncalendar-links div{cursor:pointer;width:35px;height:35px;-webkit-user-select:none;touch-action:pan-y;-webkit-user-drag:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}.dncalendar-header .dncalendar-links .dncalendar-next-month{position:absolute;right:-6px;background:url('../images/arrow.png') no-repeat -111px 0;background-size:148px 31px}.dncalendar-header .dncalendar-links .dncalendar-prev-month{position:absolute;left:10px;background:url('../images/arrow.png') no-repeat 0 0;background-size:148px 31px}.dncalendar-body{margin:0 0 10px}.dncalendar-body table{width:100%;text-align:center;border-collapse:collapse;font-size:15px}.dncalendar-body table th,td{display:table-cell;margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}.dncalendar-body thead td{color:#727272;font-size:11px;text-transform:uppercase;padding:10px 0}.dncalendar-body tbody tr td{width:13%;border-top:1px solid #ddd;color:#bdbdbd;background:#f8f8f8;text-decoration:none;vertical-align:middle}.dncalendar-body tbody td#calendarclick{cursor:pointer}.dncalendar-body tbody td.calendarclick{color:#434343;background:#fff}.dncalendar-body tbody td .entry{padding:11px 0 13px;position:relative}.dncalendar-body tbody td.calendarclick:active{background:#ddd}.dncalendar-body tbody td .entry:after{content:attr(data-title);left:0;position:absolute;font-size:10px;bottom:1px;text-align:center;width:100%}.dncalendar-body table td.holiday{color:#fa8a20 !important}.dncalendar-body table td.calendarclick.holiday{color:#fa8a20 !important}.dncalendar-body table td.default-date{border:1px solid #eee;color:#fff !important;background:#fa8a20}.dncalendar-body table td.calendarclick.default-date{border:1px solid #ddd;color:#fff !important;background:#fa8a20}.dncalendar-body table td.today-date{border:1px solid #7ee699;color:#7ee699 !important;background:#e9fdee}.dncalendar-body table td.calendarclick.today-date{border:1px solid rgba(100%,100%,100%,0.0);color:#fa8a20 !important;background:#ffecd9}.dncalendar-body table td.note,.dncalendar-body table td.calendarclick.note{position:relative}.dncalendar-body table td.note:before{display:block;position:absolute;width:0;height:0;top:0;right:0;content:"";border-top:5px solid #c55;border-right:5px solid #c55;border-left:5px solid transparent;border-bottom:5px solid transparent}.dncalendar-body table td.calendarclick.note:before{display:block;position:absolute;width:0;height:0;top:0;right:0;content:"";border-top:5px solid #d00;border-right:5px solid #d00;border-left:5px solid transparent;border-bottom:5px solid transparent}.dncalendar-note-list{list-style:none;margin-left:4.5%;margin-bottom:20px;padding:0;color:#999}.dncalendar-note-list .date{color:#d00}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" /> <link rel="stylesheet" href="css/dncalendar-skin.min.css"> <script src="//code.jquery.com/jquery-1.11.3.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <!---calendar here ---> <div id="dncalendar-container"></div> <!---end calendar ---> <!---modal here ---> <div id="mymodal" class="modal fade" role="dialog"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h4 class="modal-title">modal header</h4> </div> <div class="modal-body"></div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">close</button> </div> </div> </div> </div> <!---end modal ---> <script type="text/javascript"> $(document).ready(function() { var my_calendar = $("#dncalendar-container").dncalendar({ datatitles: { defaultdate: 'default', today : 'today' }, notes: [ { "date": "2016-02-25", "note": ["date here"] }, { "date": "2016-02-28", "note": ["date here"] } ], shownotes: true, dayclick: function(date, view) { var selecteddate = date.getdate() + "-" + (date.getmonth() + 1) + "-" + date.getfullyear(); $('#mymodal').modal('show').on('shown.bs.modal', function () { $('.modal-body').html(selecteddate); }); } }); // init calendar my_calendar.build(); // update calendar my_calendar.update({ mindate: "2016-02-23", defaultdate: new date() }); }); </script>
Comments
Post a Comment