123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138 |
- <template>
- <div class="container">
- <div class="review-main">
- <div class="condition-wrap">
- <div class="condition-wrap-left">
- <Button type="primary">新媒体新技术</Button>
- <Button type="success">创新实验室</Button>
- </div>
- <div class="condition-wrap-right">
- <Select v-model="yearDefault" size="large" style="width:100px">
- <Option v-for="item in years" :value="item" :key="item">{{ item }}</Option>
- </Select>
- <Select v-model="monthDefault" size="large" style="width:100px">
- <Option v-for="item in monthes" :value="item" :key="item">{{ item }}</Option>
- </Select>
- <Button size="large">返回今天</Button>
- </div>
- </div>
- <full-calendar :events="fcEvents" lang="zh" @dayClick ="getDay"></full-calendar>
- </div>
- </div>
- </template>
- <script>
- import FullCalendar from 'vue-fullcalendar'
- export default {
- components: {
- FullCalendar
- },
- data() {
- return {
- yearDefault:'2019年',
- years: [
- "2012年",
- "2013年",
- "2014年",
- "2015年",
- "2016年",
- "2017年",
- "2018年",
- "2019年",
- "2020年",
- "2021年",
- "2022年",
- "2023年",
- "2024年",
- ],
- monthDefault: '1月',
- monthes: [
- '1月',
- '2月',
- '3月',
- '4月',
- '5月',
- '6月',
- '7月',
- '8月',
- '9月',
- '11月',
- '12月',
- ],
- fcEvents: [
- {
- title: 'Sunny Out of Office',
- start: '2019-05-5',
- end: '2019-05-5'
- }
- ]
- }
- },
- methods: {
- getDay(day, jsEvent) {
- console.log(day);
- console.log(jsEvent);
- }
- },
- mounted() {
- }
- }
- </script>
- <style scoped>
- html, body, #app {
- height: 100% !important;
- user-select: none;
- }
-
- .main-content {
- background:rgb(248,248,248) !important;
- }
- .container {
- width: 1200px;
- margin: 100px auto;
- display:flex;
- flex-direction:row;
- justify-content:space-between;
- }
- .review-main {
- background:#fff;
- width:100%;
- padding:10px 25px;
- }
- .review-main /deep/ .full-calendar-header {
- display:none;
- }
- .review-main /deep/ .comp-full-calendar {
- padding:0px;
- max-width:1200px;
- }
- .review-main /deep/ .weeks {
- background: -webkit-linear-gradient(#E1E7EC, #B9C6D1); /* Safari 5.1 - 6.0 */
- background: -o-linear-gradient(#E1E7EC, #B9C6D1); /* Opera 11.1 - 12.0 */
- background: -moz-linear-gradient(#E1E7EC, #B9C6D1); /* Firefox 3.6 - 15 */
- background: linear-gradient(#E1E7EC, #B9C6D1); /* 标准的语法 */
- height: 40px;
- line-height: 40px;
- }
- .review-main /deep/ .full-calendar-body .dates .week-row .day-cell.today {
- background:#dfe6ec;
- }
- .review-main /deep/ .week-row > .not-cur-month {
- background: linear-gradient( -45deg, #ecf0f4 25%, #ffffff 0, #ffffff 50%, #ecf0f4 0, #ecf0f4 75%, #ffffff 0 ); /* 标准的语法(必须放在最后) */
- background-size: 20px 20px;
- }
- .review-main /deep/ .week-row {
- height:140px;
- }
- .review-main /deep/ .events-week {
- height:140px;
- }
-
- .condition-wrap {
- display:flex;
- flex-direction:row;
- justify-content : space-between;
- }
- </style>
|