Mono Support EventCalendar 

Viewed 22842 time(s), 6 post(s), 4/16/2011 1:29:48 PM - by Helene
4/16/2011 1:29:49 PM
315 Reputation 39 Total posts

Hi

I like the new EventCalendar very much :)

But it is a little too blue for my site. Where can I change the colors?

Regards

1
4/16/2011 9:55:49 PM
15993 Reputation 2214 Total posts

Hi Helene,

you can find a CSS classes related to the EventCalendar in the MonoX demo css file located here "/App_Themes/Default/Default.css" under the "/**** Event Module Start ****/" section.

To change the event scheduler skin you can use on of the built-in skins that you can set inside the mark-up located here "/MonoX/ModuleGallery/EventModule/EventModule.ascx" (I recommend that you copy the mark-up to your own location and change it there), look for the code below and set the Skin property:

<telerik:RadScheduler ID="schEvent" runat="server" Height="100%"
                            DataKeyField="Id" DataStartField="StartTime" DataEndField="EndTime" DataSubjectField="Title" DataDescriptionField="Description"
                            Skin="Vista" CssClass="event-scheduler" SelectedView="WeekView">
                            </telerik:RadScheduler>

You can find the scheduler available skins here (In the upper right corner you can find the Skin list).

I hope this will get you started.

2
4/18/2011 7:48:12 AM
315 Reputation 39 Total posts

Hi khorvat

Thanks for the answer but I can not find the "/**** Event Module Start ****/" in the "/App_Themes/Default/Default.css".!?

Can it be located somewhere else?

- I have the newest version of MonoX installed.

Regards


3
4/18/2011 8:04:00 AM
15993 Reputation 2214 Total posts

Hi Helene,

it is located in that file, here is the css for the Event Module (and I'm attaching the whole css file from latest MonoX version)

/**** Event Module Start ****/
.event-scheduler p
{
    margin:0px;
}
.event-module .calendar
{
    padding-right: 10px;
}
.event-module .calendar .date-marked
{
    background: url(img/date-marked.png) no-repeat;
    border: solid 1px #d5e1ec;
}
.event-module .calendar .add-new-event,
.event-simple-view .add-new-event
{
    width: 220px;
    height: 34px;
    background: url(img/orange-button.png) no-repeat;
    font-size: 14px;
    color: #fff;
    text-align: center;
    line-height: 33px;
    display: block;
    margin-bottom: 5px;
}
.event-module .scheduler
{
     
}
.event-module
{
     
}
.event-module .short-label
{  
    display: block;
}
.event-module INPUT[type="checkbox"]
{
    float: none;
}
.event-details-view
{
    padding: 10px;
}
.event-details-view .title,
.event-simple-content .title
{
    font-size: 14px;
    margin-bottom: 10px;
    font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
    font-size: 14px;
    font-weight: bold;
    color: #DC613F;
}
.event-details-view .date
{
     
}
.event-details-view .options
{
    overflow: hidden;
    margin-top: 10px;
    padding-top: 10px;
    border-top: solid 1px #ddd;
}
.event-details-view .event-content,
.event-simple-content .event-content
{
    margin-top: 10px;
}
.event-details-view .event-content .description,
.event-simple-content .event-content .description
{
    margin-top: 10px;
}
.event-simple-view
{
    overflow: hidden;
    margin-top: 10px;
}
.event-simple-view .top-button-holder
{
    overflow: hidden;
    float: right;
    margin: 0px 0px 10px 0px;
}
.event-simple-view .top-button-holder .date-picker
{
    float: left;
    margin: 3px 0px 0px 0px;
}
.event-simple-view .top-button-holder .styled-button,
.event-simple-view .styled-button
{
    float: left;
}
.event-simple-view .top-button-holder .styled-button .button,
.event-simple-view .styled-button .button
{
    margin: 0px;
}
.event-simple-view .list-view
{
    overflow: hidden;
    clear: both;
}
.event-simple-view .event-simple-content
{
    padding: 10px;
    position: relative;
}
.event-simple-view .item
{
    background: #f4fcff;
    border-bottom: solid 1px #dfeaee;
}
.event-simple-view .item-a
{
    background: #fff;
    border-bottom: solid 1px #dfeaee;
     
}
.event-simple-view .first
{
    border-top: solid 1px #a1b3bd;
}
.event-simple-view .last
{
    border-bottom: solid 1px #a1b3bd;
}
.event-simple-view .event-simple-content .options
{
    position: absolute;
    top: 10px;
    right: 10px;
}
.event-simple-view .event-simple-content .options .edit
{
    width: 16px;
    height: 16px;
    background: url(img/edit-icon.png) no-repeat;
    float: left;
    margin-right: 5px;
}
.event-simple-view .event-simple-content .options .edit:hover
{  
    background: url(img/edit-icon-hover.png) no-repeat;
}
.event-simple-view .event-simple-content .options .delete
{
    width: 16px;
    height: 16px;
    background: url(img/delete-icon.png) no-repeat;
    float: left;
}
.event-simple-view .event-simple-content .options .delete:hover
{
    background: url(img/delete-icon-hover.png) no-repeat;
}
/**** Event Module End ****/

4
4/18/2011 8:26:05 AM
315 Reputation 39 Total posts

Hi agaiin.

Thank you so much and I´m very sorry, it was me who had made a mistake.

Regards

5
4/18/2011 9:31:19 AM
15993 Reputation 2214 Total posts

Hi,

np, I'm glad that we have found the "missing" css ;)

Regards

6
This is a demo site for MonoX. Please visit Mono Software for more info.