javascriptcssdojodojox.calendar

Remove week number column in 'dojox.Calendar'

I've got a dojox/calendar/Calendar with dateInterval: 'month', and I would like to remove the week number column that appears. Is there a way to do this in calendar object creation through any property ?

Solution

  • You have two ways to do this .

    1. The difficult way : is to extend the dojox/calendar/Calendar and make your change ( require reading all the source code to apply change ).
    2. Easiest way : is to apply change on generated and set some new styles you need both dojo/dom-construct and dojo/dom-style to have requested rendering.

    Here you find second way demonstration : not that I've still place the year at the top right of the toolbar to know in which year currently you are .
    enter image description here

    You can see demo in this Fiddle or see above snippet :

    require(["dojo/ready", "dojo/_base/declare", "dojox/calendar/Calendar", "dojo/dom-construct","dojo/dom-style","dojo/domReady!"],
function (ready, declare, Calendar,domConstruct,domStyle) {

	calendar = new Calendar({
    date: new Date(),
    dateInterval: "month",
    style: "position:relative;width:90%;height:90%",
  }, "calendar");
        
  domStyle.set(calendar.matrixView.columnHeader,'left','0px');
  domStyle.set(calendar.matrixView.columnHeader,'border-left','1px solid #B5BCC7');
  domStyle.set(calendar.matrixView.grid,'left','0px');
  domStyle.set(calendar.matrixView.grid,'border-left','1px solid #B5BCC7');
  domStyle.set(calendar.matrixView.itemContainer,'left','0px');
  domConstruct.destroy(calendar.matrixView.rowHeader);
domConstruct.place(calendar.matrixView.yearColumnHeader,calendar.matrixView.buttonContainer,"last");   
  domStyle.set(calendar.matrixView.yearColumnHeader,'margin-right','10px');
  domStyle.set(calendar.matrixView.yearColumnHeader,'margin-top','-23px');
  domStyle.set(calendar.matrixView.yearColumnHeader,'float','right');
  
});
    html, body {
    height: 100%;
    padding: 0;	
    margin: 0;
    font-family: Lucida Sans,Lucida Grande,Arial !important;
    font-size: 13px !important;
    background: white;
    color: #333;
}
    <link href="https://ajax.googleapis.com/ajax/libs/dojo/1.8.3/dojox/calendar/themes/claro/Calendar.css" rel="stylesheet"/>
<link href="https://ajax.googleapis.com/ajax/libs/dojo/1.8.3/dijit/themes/claro/claro.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
<body class="claro">
  <div id="calendar"></div>
</body>