Để tạo được một Calendar ta cần có 1 file css vào thư mục css với tên là minkalender.css nội dung sau:
.kalender-wrapper{và một file js kalender.js với nội dung:
width:100%;
font-family: 'Lato', sans-serif;
}
.kalender-header{
position:relative;
background-color:#3498db;
color:#fff;
text-align:center;
}
.kalender-header .kalender-detail{
padding:10px;
}
.kalender-header .kalender-detail .kalender-day{
display:block;
font-size:28px;
}
.kalender-header .kalender-detail .kalender-year,.kalender-header .kalender-detail .kalender-month{
display:inline-block;
padding:5px 10px;
}
.kalender-header .kalender-arrow-left{
position:absolute;
left:20px;
display:block;
top:35%;
cursor:pointer;
padding:2px 12px;
background-color:#fff;
color:#3498db;
border-radius:50%;
opacity:0.8;
transition:.3s;
font-size:20px;
}
.kalender-header .kalender-arrow-right{
position:absolute;
right:20px;
display:block;
top:35%;
cursor:pointer;
padding:2px 12px;
background-color:#fff;
color:#3498db;
border-radius:50%;
opacity:0.8;
transition:.3s;
font-size:20px;
}
.kalender-header .kalender-arrow-right:hover,.kalender-header .kalender-arrow-left:hover{
opacity:1;
}
.kalender-body{
border-left:1px solid #d9d9d9;
border-right:1px solid #d9d9d9;
border-bottom:1px solid #d9d9d9;
}
.kalender-body .kalender-days{
margin:0;
padding:0;
list-style:none;
display:table;
table-layout:fixed;
width:100%;
}
.kalender-body .kalender-days.days{
color:#3498db;
font-weight:600;
}
.kalender-body .kalender-days > li{
display:table-cell;
padding:5px 8px;
text-align:center;
}
.kalender-body .kalender-days > li.no-days{
color:#ddd;
}
.kalender-body .kalender-days > li.today{
color:#3498db;
border:1px solid #3498db;
border-radius:50%;
}
.kalender-body .kalender-days > li.today2{
color:#fff;
background-color:#3498db;
}
.kalender-body .kalender-days > li.today3{
color:#3498db;
position:relative;
}
.kalender-body .kalender-days > li.today3:hover{
background-color:transparent;
}
.kalender-body .kalender-days > li.today3:after{
position:absolute;
top:0;
left:4px;
right:4px;
bottom:0;
border:1px solid #3498db;
border-radius:50%;
content:"";
transform:rotate(-15deg);
}
.kalender-body .kalender-days > li:hover{
background-color:#eee;
}
/* themes */
.kalender-wrapper.red .kalender-header,.kalender-wrapper.red .kalender-body .kalender-days > li.today2{
background-color:#e74c3c;
}
.kalender-wrapper.red .kalender-body .kalender-days > li.today3:after,.kalender-wrapper.red .kalender-body .kalender-days > li.today{
border-color:#e74c3c;
}
.kalender-wrapper.red .kalender-body .kalender-days > li.today3,.kalender-wrapper.red .kalender-body .kalender-days.days,.kalender-wrapper.red .kalender-body .kalender-days > li.today,.kalender-wrapper.red .kalender-header .kalender-arrow-right,.kalender-wrapper.red .kalender-header .kalender-arrow-left{
color:#e74c3c;
}
.kalender-wrapper.green .kalender-header,.kalender-wrapper.green .kalender-body .kalender-days > li.today2{
background-color:#2ecc71;
}
.kalender-wrapper.green .kalender-body .kalender-days > li.today3:after,.kalender-wrapper.green .kalender-body .kalender-days > li.today{
border-color:#2ecc71;
}
.kalender-wrapper.green .kalender-body .kalender-days > li.today3,.kalender-wrapper.green .kalender-body .kalender-days.days,.kalender-wrapper.green .kalender-body .kalender-days > li.today,.kalender-wrapper.green .kalender-header .kalender-arrow-right,.kalender-wrapper.green .kalender-header .kalender-arrow-left{
color:#2ecc71;
}
.kalender-wrapper.turquoise .kalender-header,.kalender-wrapper.turquoise .kalender-body .kalender-days > li.today2{
background-color:#1abc9c;
}
.kalender-wrapper.turquoise .kalender-body .kalender-days > li.today3:after,.kalender-wrapper.turquoise .kalender-body .kalender-days > li.today{
border-color:#1abc9c;
}
.kalender-wrapper.turquoise .kalender-body .kalender-days > li.today3,.kalender-wrapper.turquoise .kalender-body .kalender-days.days,.kalender-wrapper.turquoise .kalender-body .kalender-days > li.today,.kalender-wrapper.turquoise .kalender-header .kalender-arrow-right,.kalender-wrapper.turquoise .kalender-header .kalender-arrow-left{
color:#1abc9c;
}
.kalender-wrapper.purple .kalender-header,.kalender-wrapper.purple .kalender-body .kalender-days > li.today2{
background-color:#9b59b6;
}
.kalender-wrapper.purple .kalender-body .kalender-days > li.today3:after,.kalender-wrapper.purple .kalender-body .kalender-days > li.today{
border-color:#9b59b6;
}
.kalender-wrapper.purple .kalender-body .kalender-days > li.today3,.kalender-wrapper.purple .kalender-body .kalender-days.days,.kalender-wrapper.purple .kalender-body .kalender-days > li.today,.kalender-wrapper.purple .kalender-header .kalender-arrow-right,.kalender-wrapper.purple .kalender-header .kalender-arrow-left{
color:#9b59b6;
}
.kalender-wrapper.yellow .kalender-header,.kalender-wrapper.yellow .kalender-body .kalender-days > li.today2{
background-color:#f1c40f;
}
.kalender-wrapper.yellow .kalender-body .kalender-days > li.today3:after,.kalender-wrapper.yellow .kalender-body .kalender-days > li.today{
border-color:#f1c40f;
}
.kalender-wrapper.yellow .kalender-body .kalender-days > li.today3,.kalender-wrapper.yellow .kalender-body .kalender-days.days,.kalender-wrapper.yellow .kalender-body .kalender-days > li.today,.kalender-wrapper.yellow .kalender-header .kalender-arrow-right,.kalender-wrapper.yellow .kalender-header .kalender-arrow-left{
color:#f1c40f;
}
.kalender-wrapper.dark .kalender-header,.kalender-wrapper.dark .kalender-body .kalender-days > li.today2{
background-color:#34495e;
}
.kalender-wrapper.dark .kalender-body .kalender-days > li.today3:after,.kalender-wrapper.dark .kalender-body .kalender-days > li.today{
border-color:#34495e;
}
.kalender-wrapper.dark .kalender-body .kalender-days > li.today3,.kalender-wrapper.dark .kalender-body .kalender-days.days,.kalender-wrapper.dark .kalender-body .kalender-days > li.today,.kalender-wrapper.dark .kalender-header .kalender-arrow-right,.kalender-wrapper.dark .kalender-header .kalender-arrow-left{
color:#34495e;
}
.kalender-wrapper.dark-blue .kalender-header,.kalender-wrapper.dark-blue .kalender-body .kalender-days > li.today2{
background-color:#2980b9;
}
.kalender-wrapper.dark-blue .kalender-body .kalender-days > li.today3:after,.kalender-wrapper.dark-blue .kalender-body .kalender-days > li.today{
border-color:#2980b9;
}
.kalender-wrapper.dark-blue .kalender-body .kalender-days > li.today3,.kalender-wrapper.dark-blue .kalender-body .kalender-days.days,.kalender-wrapper.dark-blue .kalender-body .kalender-days > li.today,.kalender-wrapper.dark-blue .kalender-header .kalender-arrow-right,.kalender-wrapper.dark-blue .kalender-header .kalender-arrow-left{
color:#2980b9;
}
.kalender-wrapper.dark-red .kalender-header,.kalender-wrapper.dark-red .kalender-body .kalender-days > li.today2{
background-color:#c0392b;
}
.kalender-wrapper.dark-red .kalender-body .kalender-days > li.today3:after,.kalender-wrapper.dark-red .kalender-body .kalender-days > li.today{
border-color:#c0392b;
}
.kalender-wrapper.dark-red .kalender-body .kalender-days > li.today3,.kalender-wrapper.dark-red .kalender-body .kalender-days.days,.kalender-wrapper.dark-red .kalender-body .kalender-days > li.today,.kalender-wrapper.dark-red .kalender-header .kalender-arrow-right,.kalender-wrapper.dark-red .kalender-header .kalender-arrow-left{
color:#c0392b;
}
.kalender-wrapper.dark-green .kalender-header,.kalender-wrapper.dark-green .kalender-body .kalender-days > li.today2{
background-color:#27ae60;
}
.kalender-wrapper.dark-green .kalender-body .kalender-days > li.today3:after,.kalender-wrapper.dark-green .kalender-body .kalender-days > li.today{
border-color:#27ae60;
}
.kalender-wrapper.dark-green .kalender-body .kalender-days > li.today3,.kalender-wrapper.dark-green .kalender-body .kalender-days.days,.kalender-wrapper.dark-green .kalender-body .kalender-days > li.today,.kalender-wrapper.dark-green .kalender-header .kalender-arrow-right,.kalender-wrapper.dark-green .kalender-header .kalender-arrow-left{
color:#27ae60;
}
.kalender-wrapper.dark-turquoise .kalender-header,.kalender-wrapper.dark-turquoise .kalender-body .kalender-days > li.today2{
background-color:#16a085;
}
.kalender-wrapper.dark-turquoise .kalender-body .kalender-days > li.today3:after,.kalender-wrapper.dark-turquoise .kalender-body .kalender-days > li.today{
border-color:#16a085;
}
.kalender-wrapper.dark-turquoise .kalender-body .kalender-days > li.today3,.kalender-wrapper.dark-turquoise .kalender-body .kalender-days.days,.kalender-wrapper.dark-turquoise .kalender-body .kalender-days > li.today,.kalender-wrapper.dark-turquoise .kalender-header .kalender-arrow-right,.kalender-wrapper.dark-turquoise .kalender-header .kalender-arrow-left{
color:#16a085;
}
.kalender-wrapper.dark-purple .kalender-header,.kalender-wrapper.dark-purple .kalender-body .kalender-days > li.today2{
background-color:#8e44ad;
}
.kalender-wrapper.dark-purple .kalender-body .kalender-days > li.today3:after,.kalender-wrapper.dark-purple .kalender-body .kalender-days > li.today{
border-color:#8e44ad;
}
.kalender-wrapper.dark-purple .kalender-body .kalender-days > li.today3,.kalender-wrapper.dark-purple .kalender-body .kalender-days.days,.kalender-wrapper.dark-purple .kalender-body .kalender-days > li.today,.kalender-wrapper.dark-purple .kalender-header .kalender-arrow-right,.kalender-wrapper.dark-purple .kalender-header .kalender-arrow-left{
color:#8e44ad;
}
.kalender-wrapper.dark-yellow .kalender-header,.kalender-wrapper.dark-yellow .kalender-body .kalender-days > li.today2{
background-color:#f39c12;
}
.kalender-wrapper.dark-yellow .kalender-body .kalender-days > li.today3:after,.kalender-wrapper.dark-yellow .kalender-body .kalender-days > li.today{
border-color:#f39c12;
}
.kalender-wrapper.dark-yellow .kalender-body .kalender-days > li.today3,.kalender-wrapper.dark-yellow .kalender-body .kalender-days.days,.kalender-wrapper.dark-yellow .kalender-body .kalender-days > li.today,.kalender-wrapper.dark-yellow .kalender-header .kalender-arrow-right,.kalender-wrapper.dark-yellow .kalender-header .kalender-arrow-left{
color:#f39c12;
}
.kalender-wrapper.darker .kalender-header,.kalender-wrapper.darker .kalender-body .kalender-days > li.today2{
background-color:#2c3e50;
}
.kalender-wrapper.darker .kalender-body .kalender-days > li.today3:after,.kalender-wrapper.darker .kalender-body .kalender-days > li.today{
border-color:#2c3e50;
}
.kalender-wrapper.darker .kalender-body .kalender-days > li.today3,.kalender-wrapper.darker .kalender-body .kalender-days.days,.kalender-wrapper.darker .kalender-body .kalender-days > li.today,.kalender-wrapper.darker .kalender-header .kalender-arrow-right,.kalender-wrapper.darker .kalender-header .kalender-arrow-left{
color:#2c3e50;
}
/*! * minkalender * Copyright 2015 Minangsoft. */ "use strict";(function($){$.fn.minkalender=function(options){var settings=$.extend({days:["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"],months:["January","February","March","April","May","June","July","August","September","October","November","December"],color:"",today:"today"},options);var date=new Date();var currentmonth=date.getMonth();var currentday=date.getDate();var currentyear=date.getFullYear();return this.each(function(){var me=this;$(me).addClass('kalender-wrapper');$(me).addClass(settings.color);var calendar=updateDate(currentday,currentmonth,currentyear);$(me).append(calendar);$(me).on('click','.control',function(e){var month=0;var year=0;var day=0;if($(this).hasClass('kalender-arrow-left')==true){month=settings.months.indexOf($(me).find('.kalender-month').html())-1;year=$(me).find('.kalender-year').html();day=1;if(month<0){month=11;year=parseInt(year)-1;}} if($(this).hasClass('kalender-arrow-right')==true){month=settings.months.indexOf($(me).find('.kalender-month').html())+1;year=$(me).find('.kalender-year').html();day=1;if(month>11){month=0;year=parseInt(year)+1;}} if((currentmonth==month)&&(currentyear==year))day=currentday;var calendar=updateDate(day,month,year);$(me).empty();$(me).append(calendar);});function updateDate(d,m,y){var dim=[31,0,31,30,31,30,31,31,30,31,30,31];var oD=new Date(y,m,1);var startday=oD.getDay()+1;var startmonth=oD.getMonth();var startyear=oD.getFullYear();dim[1]=(((oD.getFullYear()%100!=0)&&(oD.getFullYear()%4==0))||(oD.getFullYear()%400==0))?29:28;var container='<div class="kalender-header"><div class="kalender-detail"><div class="kalender-day">'+d+'</div><div class="kalender-month">'+settings.months[m]+'</div><div class="kalender-year">'+y+'</div></div><span class="kalender-arrow-left control">‹</span><span class="kalender-arrow-right control">›</span></div>';container+='<div class="kalender-body"><ul class="kalender-days days">';for(var s=0;s<7;s++){container+='<li>'+settings.days[s].substr(0,3)+'</li>';} container+='</ul><ul class="kalender-days">';for(var i=1;i<=42;i++){var x=((i-startday>=0)&&(i-startday<dim[m]))?i-startday+1:'';if((startyear==currentyear)&&(startmonth==currentmonth)&&(x==d)){container+='<li class="'+settings.today+'">'+x+'</li>';}else if(x==d){container+='<li class="'+settings.today+'">'+x+'</li>';}else{if(x==""){container+='<li></li>';}else{container+='<li>'+x+'</li>';}} if(((i)%7==0)&&(i<36))container+='</ul><ul class="kalender-days">';} return container+='</div>';}});};})(jQuery);Tiếp theo ta tạo một trang index.html để test thử nhé. trong file index.html ta viết như sau
<!DOCTYPE html>
<head></head>
<body></body>với <!DOCTYPE html> các bạn xóa những phần thừ nếu tạo bằng Drw nhé, chuyễn thành như vầy vì đây là chuẫn để chạy Responsive.
</html>
- trong head ta viết như sau nhé.
<head>- Trong body ta tiếp tục viết như sau:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Minh Dũ Blog - Flat Responsive Calendar Css3</title>
<meta name="description" content="Minsoft - Tabs Css3 Html5" />
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/minkalender.css" media="screen" />
<link href='http://fonts.googleapis.com/css?family=Lato&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="kalender.js"></script>
<script>
$(document).ready(function(){
$('#date1').minkalender();
$('#date2').minkalender({color:"darker",today:"today2"});
$('#date3').minkalender({color:"red",today:"today3"});
$('#date4').minkalender({months:["januari","februari","maret","april","mei","juni","juli","agustus","september","oktober","november","desember"]});
});
</script>
</head>
<body>- Trong phần nầy có 4 mẫu cho ta lựa chọn, đây là 1 trong 4 mẫu nhé. bắt đầu từ <div class="row" style="margin-bottom:20px;"> và kết thức là </div>
<div class="container" style="margin-top:100px;">
<div class="row" style="margin-bottom:20px;">
<div class="col-sm-6 col-sm-offset-3 col-md-4 col-md-offset-4">
<div id="date1"></div>
</div>
</div>
<div class="row" style="margin-bottom:20px;">
<div class="col-sm-6 col-sm-offset-3 col-md-4 col-md-offset-4">
<div id="date2"></div>
</div>
</div>
<div class="row" style="margin-bottom:20px;">
<div class="col-sm-6 col-sm-offset-3 col-md-4 col-md-offset-4">
<div id="date3"></div>
</div>
</div>
<div class="row" style="margin-bottom:20px;">
<div class="col-sm-6 col-sm-offset-3 col-md-4 col-md-offset-4">
<div id="date4"></div>
</div>
</div>
</div>
</body>
<div class="row" style="margin-bottom:20px;">- Toàn bộ code ta có được là:
<div class="col-sm-6 col-sm-offset-3 col-md-4 col-md-offset-4">
<div id="date1"></div>
</div>
</div>
<!DOCTYPE html>Lời kết : Kết thúc bài hôm nay Minh Dũ nghĩ các bạn cũng đã nắm được Cách Tạo lịch trên web dùng CSS3 - Flat Calendar CSS3. Chúc các bạn thành công
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Minh Dũ Blog - Flat Responsive Calendar Css3</title>
<meta name="description" content="Minsoft - Tabs Css3 Html5" />
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/minkalender.css" media="screen" />
<link href='http://fonts.googleapis.com/css?family=Lato&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="kalender.js"></script>
<script>
$(document).ready(function(){
$('#date1').minkalender();
$('#date2').minkalender({color:"darker",today:"today2"});
$('#date3').minkalender({color:"red",today:"today3"});
$('#date4').minkalender({months:["januari","februari","maret","april","mei","juni","juli","agustus","september","oktober","november","desember"]});
});
</script>
</head>
<body>
<div class="container" style="margin-top:100px;">
<div class="row" style="margin-bottom:20px;">
<div class="col-sm-6 col-sm-offset-3 col-md-4 col-md-offset-4">
<div id="date1"></div>
</div>
</div>
<div class="row" style="margin-bottom:20px;">
<div class="col-sm-6 col-sm-offset-3 col-md-4 col-md-offset-4">
<div id="date2"></div>
</div>
</div>
<div class="row" style="margin-bottom:20px;">
<div class="col-sm-6 col-sm-offset-3 col-md-4 col-md-offset-4">
<div id="date3"></div>
</div>
</div>
<div class="row" style="margin-bottom:20px;">
<div class="col-sm-6 col-sm-offset-3 col-md-4 col-md-offset-4">
<div id="date4"></div>
</div>
</div>
</div>
</body>
</html>