Home > UI/UX Development > CSS > Responsive calendar web part in SharePoint 2013

Responsive calendar web part in SharePoint 2013

Ranjit Pokale CSS, Sharepoint 2

Hello everyone, in this post we discuss on how to make calendar web part responsive in SharePoint.

Steps to make Responsive calendar web part

  • First, we need to create calendar list and add some sample events.
  • To display calendar events, here we create web part page and add calendar list.
  • Now edit page in SharePoint designer and add the following CSS to the page.

    Responsive Calendar Web Part
    CSS
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    /**Hide ribbons and menus from page**/
    #titleAreaBox,
    #sideNavBox {
      display: none;
    }
    #s4-titlerow {
    height:0;
    padding:0;
    margin:0;
    }
    /**Hide ribbons and menus from page**/
     
    #contentBox {
      padding: 0!important;
      margin: 0!important;
      min-width: auto!important;
    }
     
    #s4-bodyContainer {
      padding: 0;
    }
     
    html,body,h1,h2,h3 {
      margin: 0;
      padding: 0;
      border: 0;
      vertical-align: baseline;
      font-family: "Segoe UI", "Segoe", Tahoma, Helvetica, Arial, sans-serif;
    }
    /* Calender Web Part */
    .ms-core-tableNoSpace table.ms-acal-month{
    background: rgba(243, 243, 243, 1);
    }
    .ms-core-tableNoSpace table th.ms-acal-month-top {
        text-align: center;
        color: #fff;
        background: gray;
    }
    .ms-core-tableNoSpace .ms-acal-display {
        color: #fff;
        font-size: 18px;
        font-weight: 500;
        padding: 3px 0!important;
    }
    .ms-core-tableNoSpace span.calendarTitle {
        font-weight: lighter;
        padding-left: 15px;
    }
     
    /*.ms-core-tableNoSpace [id*="nav_prev_a"] > img,
    .ms-core-tableNoSpace [id*="nav_next_a"] > img {
    height: 26px!important;
        width: 14px!important;
    }*/
    .ms-core-tableNoSpace [id*="nav_next_a"] {
        display: block;
        /*padding: 0 20px 0px 5px;*/
    }
     
    .ms-core-tableNoSpace span.ms-acal-display::first-word{
    font-weight:600;
    }
    .ms-core-tableNoSpace #AsynchronousViewDefault_CalendarView{
      border: solid 1px #c6c6c6;
      margin: 15px 0;
    }
      
    .ms-core-tableNoSpace #AsynchronousViewDefault_CalendarView .ms-acal-header{
         background: #0077D6;
         margin: 0;
         padding: 10px;
    }
    .ms-core-tableNoSpace .ms-acal-rootdiv{
         margin:0!important;
    }
     
    .ms-core-tableNoSpace .ms-acal-month-weeksel {
         width:0;
    }
    .ms-core-tableNoSpace .ms-acal-rootdiv th.ms-acal-detailtime, .ms-acal-rootdiv th.ms-acal-day-top, .ms-acal-rootdiv th.ms-acal-month-top {
    color:#444;
    }
    /* Calender Web Part end */
     
    @media (min-width: 320px) and (max-width: 640px) {
    .ms-webpartPage-root {
       border-spacing: 0;
       padding:10px;
    }
    .ms-core-tableNoSpace #AsynchronousViewDefault_CalendarView .ms-acal-header {
           padding: 6px;
    }
    .ms-core-tableNoSpace .ms-acal-display {
            font-size: 15px;
    }
    .ms-core-tableNoSpace table th.ms-acal-month-top,
    .ms-core-tableNoSpace .ms-acal-rootdiv div,
    .ms-core-tableNoSpace .ms-acal-rootdiv th.ms-acal-detailtime{
            font-size: 10px;
    }
    }
    @media (min-width: 320px) and (max-width: 640px) {
    .ms-core-tableNoSpace .ms-acal-rootdiv span,
    .ms-core-tableNoSpace .ms-acal-rootdiv div {
            word-break: break-word;
            white-space: normal;
    }
     
    }

    After adding above CSS refresh the page and see calendar web part takes content box width.
    * Calendar web part in desktop screen-default Month view.

    * Calendar web part in mobile/laptop screen-default Month view.


    * Calendar web part in desktop screen-Week view.

    * Calendar web part in mobile screen-Week view.

 

This Article is TAGGED in , . BOOKMARK THE permalink.

Avatar photo
Ranjit Pokale

Related articles

How to send an Email using workflow when items are created or updated in SharePoint?

This guide was created to provide a simple, step-by-step way for beginners

Make Document Library Webpart Responsive in SharePoint 2013

Hello everyone, in this post we discuss on how to make document

How to Restrict User to add Attachment in SharePoint List?

Every time we create a supporting list for any of the functionality,

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">