Hi folks,

could you please show how do you style a calendar in your demo?

http://formspideronline.com/formspider/main.html?name=DemoCalendar

Tutorial is missing this part. http://theformspider.com/learningcenter/tutorial-37-how-to-build-a-calendar-part-ii/

Thanks, Tomas

asked 28 Dec '12, 16:57

Tomeo's gravatar image

Tomeo
162351
accept rate: 3%


Actually that's not a standardized feature of Formspider but you can apply a theme as we did.
You need 2 things to do:

1- Pick a theme from jQuery UI Themeroller and add it to main.jsp
For example, if you picked cupertino theme, add this line to main.jsp.
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/cupertino/jquery-ui.css" />

2- Add this script to main.jsp to notify calendar of using a theme.

<script type="text/javascript">
    BDF_Constant.calendarTheme = true;
</script>

Note that you should put this script after fs-all.js, otherwise it gives error.

Other than those, you can add some classes to override default css. Here is an example for activity skin we used in that application:

.fc-event-skin {
  color: #102040;
  background-color: #eaeaea;
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(35%,#f0f0f0), color-stop(55%,#eaeaea));
  background-image: -moz-linear-gradient(center top , #f0f0f0 35%, #eaeaea 55%);
  border-radius: 2px;
  border-color: #d8d8d8;
  border-bottom-color: #d0d0d0;
}

To override more classes, you can use Chrome Developer Tools and inspect to elements you want to customize to see which classes you should set.

link

answered 31 Dec '12, 04:50

oskansavli's gravatar image

oskansavli ♦♦
3604
accept rate: 45%

Got it, many thanks for help.

Tomas

(01 Jan '13, 16:15) Tomeo
Your answer
toggle preview

Follow this question

By Email:

Once you sign in you will be able to subscribe for any updates here

By RSS:

Answers

Answers and Comments

Markdown Basics

  • *italic* or _italic_
  • **bold** or __bold__
  • link:[text](http://url.com/ "title")
  • image?![alt text](/path/img.jpg "title")
  • numbered list: 1. Foo 2. Bar
  • to add a line break simply add two spaces to where you would like the new line to be.
  • basic HTML tags are also supported

Tags:

×4
×2

Asked: 28 Dec '12, 16:57

Seen: 1,162 times

Last updated: 28 Feb '13, 13:05


© Copyright Gerger 2017