|
|
| (11 intermediate revisions by the same user not shown) |
| Line 61: |
Line 61: |
| | //generate the head of table | | //generate the head of table |
| | | | |
| − | var html = '<table class = "ui small collapsing right aligned celled table calendar" id = "calendarTable">'; | + | var html = '<table class = "ui right aligned justified celled table calendar" id = "calendarTable" style = "font-size:11px;table-layout:fixed; max-width: 250px;">'; |
| | html += '<thead><tr><th id= "calendarHead" colspan = "7">Calendar</th></tr><tr class = "chead"><th id="left">'; | | html += '<thead><tr><th id= "calendarHead" colspan = "7">Calendar</th></tr><tr class = "chead"><th id="left">'; |
| | html += '\<</th>'; | | html += '\<</th>'; |
| Line 116: |
Line 116: |
| | this.cCode = html; | | this.cCode = html; |
| | } | | } |
| − |
| |
| − | function isScrolledIntoView(elem) {
| |
| − | var docViewTop = $(window).scrollTop();
| |
| − | var docViewBottom = docViewTop + $(window).height() - $("#menucomb").height();
| |
| − |
| |
| − | var elemTop = $(elem).offset().top;
| |
| − | var elemBottom = elemTop + $(elem).height();
| |
| − |
| |
| − | if(elemTop >= docViewTop) {
| |
| − | return true;
| |
| − | }
| |
| − | else if(elemBottom >= docViewBottom) {
| |
| − | return true;
| |
| − | }
| |
| − | return false; // || elemTop >= docViewTop) ;
| |
| − | }
| |
| − |
| |
| − | calendar = new Calendar();
| |
| − | calendar.build();
| |
| − | document.getElementById("calendarField").innerHTML = calendar.getCode();
| |
| − |
| |
| − | //add event listener
| |
| − | document.addEventListener("click", changeMonth, false);
| |
| − |
| |
| − | function changeMonth(e) {
| |
| − | if (e.target.getAttribute("id") == "left") {
| |
| − | calendar.takeMonth();
| |
| − | calendar.build();
| |
| − | document.getElementById("calendarField").innerHTML = calendar.getCode();
| |
| − | }
| |
| − | if (e.target.getAttribute("id") == "right") {
| |
| − | calendar.addMonth();
| |
| − | calendar.build();
| |
| − | document.getElementById("calendarField").innerHTML = calendar.getCode();
| |
| − | }
| |
| − | if (e.target.parentNode.getAttribute("class") == "week") {
| |
| − | location.href = "#" + calendar.getWeek(e.target.getAttribute("id"));
| |
| − | }
| |
| − | }
| |
| − | $(document).ready(function () {
| |
| − | $("#calendarField").on('click', '#calendarHead', function (e) {
| |
| − | var width = $("#calendarTable").width();
| |
| − | //console.log(width);
| |
| − | $("#calendarTable").find("tbody").toggle(); //toggle all body
| |
| − | $("#calendarTable").find(".chead").toggle();
| |
| − | $("#calendarTable").width(width);
| |
| − | });
| |
| − | $(window).scroll(function () {
| |
| − | console.log("event fired");
| |
| − | var id = null;
| |
| − | $(".weekRow").each(function () {
| |
| − | if (isScrolledIntoView($(this))) {
| |
| − | if (id == null) {
| |
| − | id = $("span", this).attr("id");
| |
| − | //id = $(this).attr("id")
| |
| − | }
| |
| − | }
| |
| − | });
| |
| − |
| |
| − | day = id.split("-")[0].split(".")[0];
| |
| − | month = id.split("-")[0].split(".")[1];
| |
| − |
| |
| − | calendar = new Calendar(month - 1, 2016);
| |
| − | calendar.build();
| |
| − | document.getElementById("calendarField").innerHTML = calendar.getCode();
| |
| − | //console.log(id);
| |
| − |
| |
| − | var parent = null;
| |
| − |
| |
| − | //clear all tr classes
| |
| − | $("tr").each(function () {
| |
| − | if ($(this).attr("class") == "weekHighLight") {
| |
| − | $(this).attr("class") = "week";
| |
| − | }
| |
| − | });
| |
| − |
| |
| − | $("td").each(function () {
| |
| − | if ($(this).attr("class") != "weak") {
| |
| − | if ($(this).html() == day) {
| |
| − | if (parent == null) {
| |
| − | parent = $(this).parent().attr("id")
| |
| − | }
| |
| − | }
| |
| − | }
| |
| − | });
| |
| − | $("#" + parent).removeClass("week");
| |
| − | $("#" + parent).addClass("weekHighLight");
| |
| − | });
| |
| − | });
| |
| − |
| |
| − |
| |
| | </script> | | </script> |
| | </html> | | </html> |
