Primefaces Мобильный календарь выглядит как простой компонент календаря

Question

Я новичок в мобильных телефонах. Я сделал простую страницу и у меня есть несколько проблем с p: calendar. Мой календарь похож на простой календарь, а не на мобильный. Вот мой код:

<f:view xmlns="http://www.w3.org/1999/xhtml"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:p="http://primefaces.org/ui"
    xmlns:pm="http://primefaces.org/mobile"        
    contentType="text/html"
    renderKitId="PRIMEFACES_MOBILE">



<pm:page title="EDMS">   
     <f:facet name="postinit">                         
      <link rel="stylesheet"
            href="#{request.contextPath}/javax.faces.resource/calendar/calendar.css.jsf?ln=primefaces-mobile" />
     <h:outputStylesheet library="primefaces-mobile" name="calendar/calendar.css"  />
     <h:outputScript library="primefaces-mobile" name="calendar/calendar.js" />               
    <style>
            .th-groups th {
                    text-align: center;
                    background-color: rgba(0,0,0,.1);
                    border-right: 1px solid #fff;
            }
            .ui-li-custom .ui-li-count {
                    right: 10px !important;
            }                

    </style>   

  </f:facet>   

    <!-- Main View -->
    <pm:view id="main">  

        <pm:header title="eDMS Mobile" swatch="b"/>

        <pm:content>                
             <p:outputPanel layout="block" style="padding-right: 15px">
                    <h:form>
                        <p:dataList type="inset" styleClass="ui-li-custom">
                            <f:facet name="header">Ana Menü</f:facet>
                            <f:attribute name="icon" value="false" />
                            <h:outputLink value="#dateView">Date</h:outputLink>
                        </p:dataList>
                    </h:form>
                </p:outputPanel>


        </pm:content>

    </pm:view>

     <pm:view id="dateView">
        <pm:header title="Randevu Alma" swatch="b">
             <f:facet name="left"><p:button value="Back" icon="back" href="#main?reverse=true"/></f:facet>
        </pm:header>
        <pm:content>

           <p:calendar value="#{myBean.date}"/>


       </pm:content>
     </pm:view>


</pm:page>

И это выглядит так: http://imgur.com/4t68wlL

(Я не могу вставить изображение из-за моей репутации)

Также я посмотрел на мобильном форуме Primefaces и увидел несколько предложений и попробовал это:

<f:view xmlns="http://www.w3.org/1999/xhtml"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:p="http://primefaces.org/ui"
    xmlns:pm="http://primefaces.org/mobile"        
    contentType="text/html"
    renderKitId="PRIMEFACES_MOBILE">

<h:head>
   <f:facet name="postinit">                         
      <link rel="stylesheet"
            href="#{request.contextPath}/javax.faces.resource/calendar/calendar.css.jsf?ln=primefaces-mobile" />
     <h:outputStylesheet library="primefaces-mobile" name="calendar/calendar.css"  />
     <h:outputScript library="primefaces-mobile" name="calendar/calendar.js" />               
    <style>
            .th-groups th {
                    text-align: center;
                    background-color: rgba(0,0,0,.1);
                    border-right: 1px solid #fff;
            }
            .ui-li-custom .ui-li-count {
                    right: 10px !important;
            }                

    </style>   

  </f:facet>   
</h:head>


<pm:page title="EDMS">   

    <!-- Main View -->
    <pm:view id="main">  

Но это тоже не сработало. Я использую Primefaces 3.5 и Primefaces Mobile 1.0 снимок. Я добавляю библиотеки с Maven. Вот мои зависимости:

<dependency>
        <groupId>org.primefaces</groupId>
        <artifactId>primefaces</artifactId>
        <version>${org.primefaces-version}</version>
    </dependency>
    <dependency>
        <groupId>org.primefaces.extensions</groupId>
        <artifactId>primefaces-extensions</artifactId>
        <version>${org.primefaces.extensions-version}</version>
    </dependency>

    <dependency>
        <groupId>org.primefaces.themes</groupId>
        <artifactId>bluesky</artifactId>
        <version>${org.primefaces.themes-version}</version>
    </dependency>

    <dependency>
        <groupId>org.primefaces</groupId>
        <artifactId>primefaces-mobile</artifactId>
        <version>1.0.0-SNAPSHOT</version>
    </dependency>

Мое мнение, эта проблема о файлах CSS, но я не могу понять, как это исправить, поэтому мне нужна ваша помощь. Кстати, извините за мой плохой английский:D.