JSFiddle - React, Tailwind, and code Playground

by budyniowski

HTML

<script src="https://unpkg.com/vue"></script>
<img src="http://nsp.com.pl/wp-content/uploads/2016/11/logo.png" alt="Mountain View" class="logo">
<div id="mantisCalendar">
  <div class="calendar" v-cloak>
    
      <transition
    name="custom-classes-transition"
    enter-active-class="animated fadeIn"
    leave-active-class="animated fadeOut"
  >
    <div v-if="popupController['show']" class="popupWrapper" :style="popupController" @click="popupController['show'] = false">
      <did class="popup">
        <div class="popupItem" v-for="note in selectedDay.notes">{{note}}</div>
      </did>
      
    </div>
    </transition>
  <div class="month" v-for="month in 12">
    <div>{{getMonthName(month)}}</div>
    <div class="day holder" v-for="n in generatePlaceholders(month, 0)"></div>
    <div :style="dayColorizer(month, i)"
         class="day"
         v-for="(day, i) in new Date(year, month, 0).getDate()"
         @click="createPopup($event, month, i)">{{new Date(year, month-1, i+1).getDate()}}</div>
  </div>
  </div>
</div>

CSS

@import url('https://fonts.googleapis.com/css?family=Roboto:300,400');
body {
  background-color: #3498db;
}
.calendar {
  margin: 20px;
  max-width: 980px;
  display: block;
  padding: 30px;
}
.popupWrapper {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  background-color: rgba(0, 0, 0, .5);
  box-shadow: 5px 5px 7px -5px rgba(0,0,0,0.75);
}
.popup {
  display: block;
  align-self: center;
  background-color: #FFFFFF;
  width: 60%;
  height: 50%;
}
.popupItem {
  width: 100%;
  height: 30px;
  line-height: 30px;
  text-align: center;
  vertical-align: middle;
  background-color: #FFFFFF;
  color: #000000;
}
.month {
  display: inline-block;
  width: 160px;
  vertical-align: top;
  margin-top: 20px;
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  color:white;
 
}

.day {
  height: 17px;
  width: 17px;
  margin: 2px;
  display: inline-block;
  font-size: .6em;
  text-align: center;
  vertical-align: middle;
  line-height: 15px;
  font-weight: 400;
  transition: background .25s ease-in-out;
}

.day:hover {
  cursor: pointer;
  background: rgba(0,0,0,.3)
}
.day.holder {
  visibility: hidden;
}
.day.holder + div:not(.holder) {
  margin-left: -2px;
}
.weekend {
}
.logo{
  transform: scale(.6);
  padding:20px; 
}




@charset "UTF-8";

/*!
 * animate.css -http://daneden.me/animate
 * Version - 3.5.2
 * Licensed under the MIT license - http://opensource.org/licenses/MIT
 *
 * Copyright (c) 2017 Daniel Eden
 */

.animated {
  animation-duration: 1s;
  animation-fill-mode: both;
}

.animated.infinite {
  animation-iteration-count: infinite;
}

.animated.hinge {
  animation-duration: 2s;
}

.animated.flipOutX,
.animated.flipOutY,
.animated.bounceIn,
.animated.bounceOut {
  animation-duration: .75s;
}

@keyframes bounce {
  from, 20%, 53%, 80%, to {
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    transform: translate3d(0,0,0);
  }

  40%, 43% {
   ...

JavaScript

new Vue({
  el: '#mantisCalendar',
  data: {
    selectedDay: {
    	notes: []
    },
  	styleVariables: {
    	futureColor: 'rgba(0, 0, 0, 0.45)',
      weekendColor: 'rgba(255, 255, 255 ,0.4)',
      fullReportedColor: 'rgba(62, 187, 62, 0.75)',
      partialyReportedColor: 'rgba(62, 187, 185, 0.75)',
      overtimeReportedColor: 'rgba(191, 63, 63, 0.75)'
    },
    mantisAPI: {
      1: {
        2: {
          timeReported: 8,
          reportedTasks: [
            "Zrobiłem konfigurację 11111  22222 ",
            "Zepsułem...",
            "adasdadss",
            "asdadsasdasdas",
            "adasdadss",
            "adasdadss",
            "kwadrat1",
            "kwadrat2",
            "kwadrat3",
            "kwadrat4",
            "kwadrat5"
          ]
        },
        3: {
          timeReported: 6,
          reportedTasks: [
            "3",
            "3"
          ]
        },
        5: {
          timeReported: 10,
          reportedTasks: [
            "5",
            "5"
          ]
        },
        19: {
          timeReported: 8,
          reportedTasks: [
            "19",
            "19"
          ]
        },
        7: {
          timeReported: 4,
          reportedTasks: [
            "7",
            "7"
          ]
        },
        22: {
          timeReported: 10,
          reportedTasks: [
            "22",
            "22"
          ]
        }
      }
    },
    months: {},
    popupController: {
      show: false,
      top: 0,
      left: 0
    },
    year: 2017,
    locale: "pl"

  },
  methods: {
    generatePlaceholders(month, i){
    	let dayNumber = this.getDayNumber(month, i);
    	return dayNumber === 0 ? 6 : dayNumber - 1;
    },
    getDayNumber(month, i) {
    	return new Date(this.year, month-1, i+1).getDay()
    },
  	isWeekend(month, i) {
      let dayNumber = this.getDayNumber(month, i)
      let evaluated = dayNumber === 6 || dayNumber === 0;
      
    	return evaluated;
    },
    isInFuture(month, i)...