cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

Quick-add: + add another resource

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <!-- Credit --->
<!-- how to calculate feColorMatrix - http://bit.ly/2t4ZuoC --->
<!-- photo credit - https://flic.kr/p/pG4piA --->
<!-- RGB color parser - http://mementoo.info/archives/594 --->

<svg style="visibility:hidden;" width="0" height="0"> 
  <filter id="duotone" color-interpolation-filters="sRGB">         <feColorMatrix type="matrix" values="0.7 0 0 0 0.3 0.6 0 0 0 0.2 0.3 0 0 0 0.6 0 0 0 1 0"></feColorMatrix> 
  </filter>
</svg>

<div class="flex-contatiner">
	<div class="calendar-container">
		<div class="image-container">
			<div class="image"></div>
		</div>
		<div class="calendar">
			<h2 class="month-title" id="js-month"></h2>
			<table class="calendar-table">
  			<thead>
    			<tr><th>日</th><th>月</th><th>火</th><th>水</th><th>木</th><th>金</th><th>土</th></tr>
  			</thead>
  			<tbody id="js-calendar-body"></tbody>
			</table>
		</div>
	</div>
</div>
            
          
!
            
              @import url('https://fonts.googleapis.com/css?family=Josefin+Sans:600')
	
// -------- Mixins --------//	
size(w=100%,h=100%)
	width w
	height h
	
// -------- variables --------//		
$color-1 = rgb(254, 205, 211)
$color-2 = rgb(80, 50, 130)

// -------- Basic Styles --------//	
html
body
	size()

body
	background-image linear-gradient( 45deg, $color-1, $color-2)
	overflow hidden

*
	box-sizing border-box

.flex-contatiner
	size()
	display flex
	justify-content center
	align-items center
	overflow hidden

// -------- Styles --------//

.calendar-container
	position relative
	size(360px,360px)
	box-shadow  0 27px 24px 0 rgba(0, 0, 0, 0.2), 0 40px 77px 0 rgba(0, 0, 0, 0.22)
	overflow visible

.image-container
	position absolute
	top 0
	right 0
	bottom 0
	left 0
	background-color $color-2
	
.image
	size()
	background-image url('https://c1.staticflickr.com/4/3952/15549529232_83f16d2aa2_z.jpg')
	background-repeat no-repeat
	background-size cover
	background-position center center
	filter url(#duotone)

.calendar
	position absolute
	width 100%
	height 100%
	margin-top 10%
	margin-left 10%
	padding-top 15%
	border 10px solid #fff
	font-family 'Josefin Sans', sans-serif
	.month-title
		position absolute
		top -0.4em
		left -0.3em
		margin 0
		font-size 400px
		line-height 1
		letter-spacing 0
		color #fff
		opacity .15
	.calendar-table
		position absolute
		width 100%
		height 85%
		border-collapse collapse
		color #fff
		th, td
			text-align center
			font-size 16px
		td
			cursor pointer
			transition opacity .3s ease
			&:not(.is-today)
				opacity .5
			&:hover
				opacity 1
	.is-today
		opacity 1
		background-color #fff
		color $color-2

            
          
!
            
              /* calendar built with the tutorial from https://liginc.co.jp/355474 */


var $window = $(window);
var $month = $('#js-month');
var $tbody = $('#js-calendar-body');

var today = new Date();
var currentYear = today.getFullYear(),
    currentMonth = today.getMonth();

$window.on('load',function(){
  calendarHeading(currentYear, currentMonth);
  calendarBody(currentYear, currentMonth, today);
});

function calendarBody(year, month, today){
  var todayYMFlag = today.getFullYear() === year && today.getMonth() === month ? true : false;
  var startDate = new Date(year, month, 1);
  var endDate  = new Date(year, month + 1 , 0);
  var startDay = startDate.getDay();
  var endDay = endDate.getDate();
  var textSkip = true;
  var textDate = 1;
  var tableTd ='';
  var tableBody ='';
  
  for (var row = 0; row < 6; row++){
    var tr = '<tr>';
    
    for (var col = 0; col < 7; col++) {
      if (row === 0 && startDay === col){
        textSkip = false;
      }
      if (textDate > endDay) {
        textSkip = true;
      }
      var addClass = todayYMFlag && textDate === today.getDate() && !textSkip ? 'is-today' : '';
      var textTd = textSkip ? '&nbsp;' : textDate++;
      var td = '<td class="'+addClass+'">'+textTd+'</td>';
      tr += td;
    }
    tr += '</tr>';
    tableBody += tr;
  }
  $tbody.html(tableBody);
}

function calendarHeading(year, month){
  $month.text(month + 1);
}
            
          
!
999px
Loading ..................

Console